How to manually add mouseover image comparisons to posts

garrybunk · 2018-03-29T13:02:45.000Z

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

Hunter · 2018-03-29T13:16:21.000Z

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…

garrybunk · 2018-03-29T13:20:11.000Z

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

sb56637 · 2018-03-29T13:25:00.000Z

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

Or, if you want to add a percentage width:

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

garrybunk · 2018-03-29T13:28:18.000Z

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

sb56637 · 2018-03-29T13:30:54.000Z

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.

garrybunk · 2018-03-29T14:30:30.000Z

Mouseover Test:

EDIT - I can’t get it to work.

-Garry

sb56637 · 2018-03-29T13:42:18.000Z

garrybunk:

Mouseover Test:

EDIT - I can’t get it to work.

-Garry

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.

garrybunk · 2018-03-29T14:21:40.000Z

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

sb56637 · 2018-03-29T14:31:46.000Z

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

garrybunk · 2018-03-29T14:32:01.000Z

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

sb56637 · 2018-03-29T14:33:00.000Z

garrybunk:

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

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.

keithd · 2018-03-29T15:23:41.000Z

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

garrybunk · 2018-03-29T15:35:33.000Z

Test #2

EDIT - Perfect! Thanks again SB!

-Garry

sb56637 · 2018-03-29T15:35:17.000Z

garrybunk:

Test #2

-Garry

Perfect!

garrybunk · 2018-03-29T15:44:01.000Z

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

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

-Garry

raccoon · 2018-03-29T21:39:14.000Z

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

RobertB · 2018-03-29T23:07:17.000Z

There, thats better.

angerdan · 2018-07-16T17:57:24.000Z

Nice feature!

sb56637 · 2023-03-05T13:12:20.433Z