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.
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>
Hover - loses the images [FIXED]
Hover - loses the images [FIXED]
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
Re: Hover - loses the images
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.
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.
Re: Hover - loses the images
Hi PsiderPsider 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.
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
Re: Hover - loses the images
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?
Re: Hover - loses the images
The hover works fine on the Home page when topic and images are placed as follows: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?
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
Re: Hover - loses the images
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'" />
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'" />
Re: Hover - loses the images
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.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'" />
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