Hover - loses the images - RESOLVED

[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 https://forums.madcapsoftware.com/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>

[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]

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.

[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]

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

[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]

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 :)