How to manually add mouseover image comparisons to posts

19 posts / 0 new
Last post
garrybunk
garrybunk's picture
Offline
Last seen: 17 hours 43 min ago
Joined: 10/31/2011 - 09:25
Posts: 6024
Location: Johnstown, PA
How to manually add mouseover image comparisons to posts

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

My Bike Lights Thread, Optics (TIR) Comparison Beamshots, Diffusion Techniques


NOTE: Moving my photos from PhotoBucket to Flickr. PM me or post in the thread if you can’t see my images and need me to fix or send a gallery link. PhotoBucket images should remain visible until November 2018.
Edited by: sb56637 on 03/29/2018 - 09:46
Hunter
Offline
Last seen: 1 month 4 weeks ago
Joined: 12/23/2015 - 07:30
Posts: 254
Location: Denmark

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
garrybunk's picture
Offline
Last seen: 17 hours 43 min ago
Joined: 10/31/2011 - 09:25
Posts: 6024
Location: Johnstown, PA

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

My Bike Lights Thread, Optics (TIR) Comparison Beamshots, Diffusion Techniques


NOTE: Moving my photos from PhotoBucket to Flickr. PM me or post in the thread if you can’t see my images and need me to fix or send a gallery link. PhotoBucket images should remain visible until November 2018.
sb56637
sb56637's picture
Offline
Last seen: 4 hours 22 min ago
Joined: 01/08/2010 - 09:29
Posts: 6160
Location: The Light

<img src=" IMAGE-1-URL-HERE " onmouseover="this.src=' IMAGE-2-URL-HERE '" onmouseout="this.src=' IMAGE-1-URL-HERE '" />






Or, if you want to add a percentage width:

<img src=" IMAGE-1-URL-HERE " onmouseover="this.src=' IMAGE-2-URL-HERE '" onmouseout="this.src=' IMAGE-1-URL-HERE '" style="width:50%;" />




Budget Light Forum ...where Frugal meets with Flashlight!

garrybunk
garrybunk's picture
Offline
Last seen: 17 hours 43 min ago
Joined: 10/31/2011 - 09:25
Posts: 6024
Location: Johnstown, PA

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

My Bike Lights Thread, Optics (TIR) Comparison Beamshots, Diffusion Techniques


NOTE: Moving my photos from PhotoBucket to Flickr. PM me or post in the thread if you can’t see my images and need me to fix or send a gallery link. PhotoBucket images should remain visible until November 2018.
sb56637
sb56637's picture
Offline
Last seen: 4 hours 22 min ago
Joined: 01/08/2010 - 09:29
Posts: 6160
Location: The Light

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.

Budget Light Forum ...where Frugal meets with Flashlight!

garrybunk
garrybunk's picture
Offline
Last seen: 17 hours 43 min ago
Joined: 10/31/2011 - 09:25
Posts: 6024
Location: Johnstown, PA

Mouseover Test:

1

EDIT – I can’t get it to work.

-Garry

My Bike Lights Thread, Optics (TIR) Comparison Beamshots, Diffusion Techniques


NOTE: Moving my photos from PhotoBucket to Flickr. PM me or post in the thread if you can’t see my images and need me to fix or send a gallery link. PhotoBucket images should remain visible until November 2018.
sb56637
sb56637's picture
Offline
Last seen: 4 hours 22 min ago
Joined: 01/08/2010 - 09:29
Posts: 6160
Location: The Light

garrybunk wrote:
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.

Budget Light Forum ...where Frugal meets with Flashlight!

garrybunk
garrybunk's picture
Offline
Last seen: 17 hours 43 min ago
Joined: 10/31/2011 - 09:25
Posts: 6024
Location: Johnstown, PA

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

My Bike Lights Thread, Optics (TIR) Comparison Beamshots, Diffusion Techniques


NOTE: Moving my photos from PhotoBucket to Flickr. PM me or post in the thread if you can’t see my images and need me to fix or send a gallery link. PhotoBucket images should remain visible until November 2018.
sb56637
sb56637's picture
Offline
Last seen: 4 hours 22 min ago
Joined: 01/08/2010 - 09:29
Posts: 6160
Location: The Light

<img src=" https://vignette.wikia.nocookie.net/mrbean/images/4/4b/Mr_beans_holiday_ver2.jpg " onmouseover="this.src=' https://pbs.twimg.com/media/B8C2Dg8CMAAZl3r.jpg '" onmouseout="this.src=' https://vignette.wikia.nocookie.net/mrbean/images/4/4b/Mr_beans_holiday_ver2.jpg '" style="width:70%;"/>




Budget Light Forum ...where Frugal meets with Flashlight!

garrybunk
garrybunk's picture
Offline
Last seen: 17 hours 43 min ago
Joined: 10/31/2011 - 09:25
Posts: 6024
Location: Johnstown, PA

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

My Bike Lights Thread, Optics (TIR) Comparison Beamshots, Diffusion Techniques


NOTE: Moving my photos from PhotoBucket to Flickr. PM me or post in the thread if you can’t see my images and need me to fix or send a gallery link. PhotoBucket images should remain visible until November 2018.
sb56637
sb56637's picture
Offline
Last seen: 4 hours 22 min ago
Joined: 01/08/2010 - 09:29
Posts: 6160
Location: The Light
garrybunk wrote:

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.

Budget Light Forum ...where Frugal meets with Flashlight!

keithd
keithd's picture
Offline
Last seen: 1 month 6 days ago
Joined: 04/12/2014 - 00:35
Posts: 773

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

garrybunk
garrybunk's picture
Offline
Last seen: 17 hours 43 min ago
Joined: 10/31/2011 - 09:25
Posts: 6024
Location: Johnstown, PA

Test #2

EDIT – Perfect! Thanks again SB!

-Garry

My Bike Lights Thread, Optics (TIR) Comparison Beamshots, Diffusion Techniques


NOTE: Moving my photos from PhotoBucket to Flickr. PM me or post in the thread if you can’t see my images and need me to fix or send a gallery link. PhotoBucket images should remain visible until November 2018.
sb56637
sb56637's picture
Offline
Last seen: 4 hours 22 min ago
Joined: 01/08/2010 - 09:29
Posts: 6160
Location: The Light

garrybunk wrote:
Test #2

-Garry

Perfect!

Budget Light Forum ...where Frugal meets with Flashlight!

garrybunk
garrybunk's picture
Offline
Last seen: 17 hours 43 min ago
Joined: 10/31/2011 - 09:25
Posts: 6024
Location: Johnstown, PA

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

EDIT – I couldn’t get it to work there. Sad

-Garry

My Bike Lights Thread, Optics (TIR) Comparison Beamshots, Diffusion Techniques


NOTE: Moving my photos from PhotoBucket to Flickr. PM me or post in the thread if you can’t see my images and need me to fix or send a gallery link. PhotoBucket images should remain visible until November 2018.
raccoon city
raccoon city's picture
Offline
Last seen: 9 hours 25 min ago
Joined: 10/06/2010 - 02:35
Posts: 10677
Location: रॅकून सिटी Palm Desert CA USA

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

http://budgetlightforum.com/node/56178  :THUMBS-UP:

RobertB
RobertB's picture
Offline
Last seen: 3 hours 3 min ago
Joined: 12/18/2015 - 17:49
Posts: 2530
Location: USA, Michigan

There, thats better.

angerdan
angerdan's picture
Offline
Last seen: 10 hours 58 min ago
Joined: 11/01/2015 - 10:07
Posts: 311

Nice feature!