Hover over image to show another image - RESOLVED

This forum is for all Flare issues related to styles, stylesheets and XML.

Hover over image to show another image - RESOLVED

Postby M33R4 on Mon Mar 29, 2021 3:06 am

I've trawled through the internet and followed YouTube videos but still cannot work out how to put a hover over image1 that reveals image2. On mouse out image1 displays again.

My images don't have a URL - they are within my Project folders.

Help please :?:

Thank you.
Last edited by M33R4 on Fri Apr 02, 2021 12:03 am, edited 1 time in total.
Newbie to MadCap Flare
M33R4
Propeller Head
 
Posts: 61
Joined: Wed Oct 07, 2020 7:58 am
Location: UK

Re: Hover over image to show another image

Postby Psider on Tue Mar 30, 2021 5:59 pm

Did you try:

Code: Select all
<img src="relative/path/to/myimage.png" onmouseover="this.src='relative/path/to/image2.png'" onmouseout="this.src='relative/path/to/myimage.png'" />


Note the order of double and single quotes.

To get the correct path, I usually insert both images into the topic I want include the code in, then switch to HTML view to copy it.

Also, I haven't tried this in Flare, but as plain HTML it works, and the I've needed to get image and topic paths for other scenarios, and the principles should apply here.
Psider
Propellus Maximus
 
Posts: 683
Joined: Wed Jul 06, 2011 1:32 am

Re: Hover over image to show another image

Postby M33R4 on Fri Apr 02, 2021 12:02 am

Psider wrote:Did you try:

Code: Select all
<img src="relative/path/to/myimage.png" onmouseover="this.src='relative/path/to/image2.png'" onmouseout="this.src='relative/path/to/myimage.png'" />


Note the order of double and single quotes.

To get the correct path, I usually insert both images into the topic I want include the code in, then switch to HTML view to copy it.

Also, I haven't tried this in Flare, but as plain HTML it works, and the I've needed to get image and topic paths for other scenarios, and the principles should apply here.

Psider, you my friend, are amazing :!:

I got all emotional when the feature you helped me with finally worked superbly in Flare :!:

Genuinely genuinely very grateful - thank you again.
Newbie to MadCap Flare
M33R4
Propeller Head
 
Posts: 61
Joined: Wed Oct 07, 2020 7:58 am
Location: UK

Re: Hover over image to show another image - RESOLVED

Postby Psider on Mon Apr 05, 2021 6:43 pm

Phew! I'm glad it worked in Flare. :)
Psider
Propellus Maximus
 
Posts: 683
Joined: Wed Jul 06, 2011 1:32 am


Return to Styles, Stylesheets and XML

Who is online

Users browsing this forum: No registered users and 10 guests