How to manually add mouseover image comparisons to posts

BLF Site-related Issues
1

So I’m updating my photo locations from PhotoBucket to Flickr. I don’t see a way to edit or create “mouseovers” anymore. Am I correct that with a site update we lost this ability? If it can still be done, can someone show me how? OR if they can’t be created as a new post, but old existing ones can be editted to revise photo locations, please tell me how.

If anyone is questioning what I am talking about, here is a random post I picked with mouseover’s posted near the end of the post.

Thanks!
-Garry

2

I think you can still copy the code that makes mouse over functions and manually insert links to new images but its, literary, painful process, it’s painful for one image (2), if you need to do 10-20 of them I would just give up on that idea…

3

Ok, but how do I get to the code? When I change the editor to “Plain Text” I don’t even see the image URL for the second mouse-over image. Mouse overs were such a great part of posting on BLF!

-Garry

4

<img src=" IMAGE-1-URL-HERE ">








Or, if you want to add a percentage width:

<img src=" IMAGE-1-URL-HERE ">





5

Thanks SB! So I switch to “Plain Text”, paste that line in, and add the URLs? Or can I also use that line in the simple or advanced editor?

-Garry

6

Sorry that I was forced to change the Advanced Post Editor for technical reasons, and the mouseover function is no longer available in the current one. Eventually I’ll try to manually hack together a button for the Simple Post Editor to add them, but meanwhile you can use the one-liner above, it’s really not that hard. I’ll make this post sticky for now.

7

Mouseover Test:

EDIT - I can’t get it to work.

-Garry

8

Ah, I see what happened. You switched it to “Plain Text”. It needs to be in the Simple Post Editor mode. You can also use the Advanced Post Editor, but you’ll need to click on the “Disable rich-text” button at the bottom and add the mouseover into the post source code.

9

Ok , thanks. I see it’s displaying now, but now I also need to add a display width (70% or so). How do I add that with the “template” you provided?

-Garry

10

<img src=" https://vignette.wikia.nocookie.net/mrbean/images/4/4b/Mr_beans_holiday_ver2.jpg ">





11

Ok, I think I have it working. I have this now: <img src=" https://farm5.staticflickr.com/4654/39039275754_058a03d2d3_o_d.jpg " alt="1" width="75%" onmouseover="this.src=' https://farm5.staticflickr.com/4766/27969332049_6845c62de6_o_d.jpg '" alt="1" width="75%" onmouseout="this.src=' https://farm5.staticflickr.com/4654/39039275754_058a03d2d3_o_d.jpg '" alt="1" width="75%"/>

(Posted via Advanced Post Editor so it remains text.)

-Garry

12

Hi Garry, you’ll need to use the “Disable rich-text” button if you’re using the Advanced Post Editor. Also, please see the example I just posted above, which is simpler for what you’re trying to do.

13

sb, I just wanted to say I was way, way too entertained with that Mr. Bean image.

14

Test #2

EDIT - Perfect! Thanks again SB!

-Garry

15

Perfect!

16

Hmm . . . I wonder if this will work over at MTBR? Gonna have to try it.

EDIT - I couldn’t get it to work there. :frowning:

-Garry

17

By the way, there are instructions on how to do mouseovers at the end of the original post of this thread:

https://budgetlightforum.com/t/-/47268

18

There, thats better.

19

Nice feature!