Hover - loses the images [FIXED]

This forum is for all Flare issues related to styles, stylesheets and XML.
Post Reply
M33R4
Sr. Propeller Head
Posts: 128
Joined: Wed Oct 07, 2020 7:58 am
Location: UK

Hover - loses the images [FIXED]

Post by M33R4 »

I have a table with a hover function - image 1 reveals image 2 on hover then returns to image 1 when no longer hovering over it.

This works fine on my Home page.

However, when I copied and pasted, or inserted the same table as a snippet, I had a persisting problem:

image 1 is visible, but as soon as I hover over it, the image disappears completely.
imagedisappearsonhover.PNG
In this attachment, the images I have hovered over have now disappeared and won't reappear until I refresh the page.
The image that is visible has not yet been hovered over.
Thinking that the hover only wants to work on my Home page, I did a test, making a copy of my Home page but the problem happened in the copied page too.

What is going on please :?:

PS:The hover functionality I've used was kindly given to me on this thread viewtopic.php?f=6&t=33141

In Text Editor the hover set up looks like this:

<p>
<a href="../q_systembasics/systembasicshome.htm" title="System basics"><img src="4.howtousehelp_images/mod_ba.png" onmouseover="this.src='4.helptopics/s_howtousehelp/4.howtousehelp_images/mod_ba_hover.png'"
onmouseout="this.src='4.helptopics/s_howtousehelp/4.howtousehelp_images/mod_ba.png'" /><
/a>
</p>
You do not have the required permissions to view the files attached to this post.
Last edited by M33R4 on Tue May 25, 2021 2:34 am, edited 2 times in total.
Newbie to MadCap Flare
Psider
Propellus Maximus
Posts: 811
Joined: Wed Jul 06, 2011 1:32 am

Re: Hover - loses the images

Post by Psider »

When you use a snippet, the paths have to be adjusted so they point to the right place based on where the snippet is inserted. Flare does this for the href and src atributes, but I doubt it does it for the onmouseover and onmouseout attributes. (Because in my brain it's sort of javascript and auto-adjusting custom javascript isn't a thing. :) )

You could use absolute paths for the location of the published images.

For a project in a competing product I once found the relevant javascript variables to populate the correct number of ../ into the path automatically and plugged them into a custom script. Perhaps there's something similar in Flare that a friendly developer can discover.

Edit: I'm not a developer, so I might be using some of the wrong words, but hopefully it at least provides avenues of investigation. :)
M33R4
Sr. Propeller Head
Posts: 128
Joined: Wed Oct 07, 2020 7:58 am
Location: UK

Re: Hover - loses the images

Post by M33R4 »

Psider wrote:When you use a snippet, the paths have to be adjusted so they point to the right place based on where the snippet is inserted. Flare does this for the href and src atributes, but I doubt it does it for the onmouseover and onmouseout attributes. (Because in my brain it's sort of javascript and auto-adjusting custom javascript isn't a thing. :) )

You could use absolute paths for the location of the published images.

For a project in a competing product I once found the relevant javascript variables to populate the correct number of ../ into the path automatically and plugged them into a custom script. Perhaps there's something similar in Flare that a friendly developer can discover.

Edit: I'm not a developer, so I might be using some of the wrong words, but hopefully it at least provides avenues of investigation. :)
Hi Psider :)

I tried the table on its on own on a fresh page - had same problem.
I then tried the table inserted as a snippet on a fresh page - same problem.
Newbie to MadCap Flare
Psider
Propellus Maximus
Posts: 811
Joined: Wed Jul 06, 2011 1:32 am

Re: Hover - loses the images

Post by Psider »

In the plain table in a fresh page example, was the topic in the same folder as your home page? If not, did you modify the onmouseover and onmouseout paths to be the correct relative path for the location of the topic?
M33R4
Sr. Propeller Head
Posts: 128
Joined: Wed Oct 07, 2020 7:58 am
Location: UK

Re: Hover - loses the images

Post by M33R4 »

Psider wrote:In the plain table in a fresh page example, was the topic in the same folder as your home page? If not, did you modify the onmouseover and onmouseout paths to be the correct relative path for the location of the topic?
The hover works fine on the Home page when topic and images are placed as follows:

My Home page is in the top level: Content > Home.htm
My hover icons live in a level 3 as follows: Content > helptopics > howtousehelp > help_images

I wanted to move this table out of my Home page and onto its own topic page but the hover stopped working - my file/folder set up was like this:
My topic page is in the 3rd level: Content > helptopics > howtousehelp > howtousehelp.htm
My hover icons live in the same level 3 as follows: Content > helptopics > howtousehelp > help_images
Newbie to MadCap Flare
Psider
Propellus Maximus
Posts: 811
Joined: Wed Jul 06, 2011 1:32 am

Re: Hover - loses the images

Post by Psider »

So for this location:
My topic page is in the 3rd level: Content > helptopics > howtousehelp > howtousehelp.htm
My hover icons live in the same level 3 as follows: helptopics > howtousehelp > help_images

<a href="../q_systembasics/systembasicshome.htm" title="System basics"><img src="help_images/mod_ba.png" onmouseover="this.src='help_images/mod_ba_hover.png'"
onmouseout="this.src='help_images/mod_ba.png'" />

A more complicated scenario assuming the images all live in the same place:
Topic: Content > someother > path > mytopic.htm
Images: helptopics > howtousehelp > help_images

<a href="../q_systembasics/systembasicshome.htm" title="System basics"><img src="../../help_images/mod_ba.png" onmouseover="this.src='../../help_images/mod_ba_hover.png'"
onmouseout="this.src='../../help_images/mod_ba.png'" />
M33R4
Sr. Propeller Head
Posts: 128
Joined: Wed Oct 07, 2020 7:58 am
Location: UK

Re: Hover - loses the images

Post by M33R4 »

Psider wrote:So for this location:
My topic page is in the 3rd level: Content > helptopics > howtousehelp > howtousehelp.htm
My hover icons live in the same level 3 as follows: helptopics > howtousehelp > help_images

<a href="../q_systembasics/systembasicshome.htm" title="System basics"><img src="help_images/mod_ba.png" onmouseover="this.src='help_images/mod_ba_hover.png'"
onmouseout="this.src='help_images/mod_ba.png'" />

A more complicated scenario assuming the images all live in the same place:
Topic: Content > someother > path > mytopic.htm
Images: helptopics > howtousehelp > help_images

<a href="../q_systembasics/systembasicshome.htm" title="System basics"><img src="../../help_images/mod_ba.png" onmouseover="this.src='../../help_images/mod_ba_hover.png'"
onmouseout="this.src='../../help_images/mod_ba.png'" />
You got me thinking and looking at my folder layout Psider - Flare doesn't like the topic page in the 3rd level folder it seems.

Resolution:
  • I moved the topic page to the first level/Content folder level (same level as Home page).
    I, however, left the image folder in its original 3rd level location. Now the hovers are working as they should :).
    I moved the helpfiletopics.flsnp snippet to the same first level/Content folder level as my Home page and the snippet is working fine too.


Thanks for your help Psider :)
Newbie to MadCap Flare
Post Reply