Hover - loses the images - RESOLVED

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

Hover - loses the images - RESOLVED

Postby M33R4 on Wed Apr 07, 2021 9:41 am

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>
You do not have the required permissions to view the files attached to this post.
Last edited by M33R4 on Thu Apr 08, 2021 4:22 am, edited 1 time in total.
Newbie to MadCap Flare
M33R4
Propeller Head
 
Posts: 53
Joined: Wed Oct 07, 2020 7:58 am
Location: UK

Re: Hover - loses the images

Postby Psider on Wed Apr 07, 2021 5:44 pm

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. :)
Psider
Propellus Maximus
 
Posts: 679
Joined: Wed Jul 06, 2011 1:32 am

Re: Hover - loses the images

Postby M33R4 on Thu Apr 08, 2021 12:47 am

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
M33R4
Propeller Head
 
Posts: 53
Joined: Wed Oct 07, 2020 7:58 am
Location: UK

Re: Hover - loses the images

Postby Psider on Thu Apr 08, 2021 1:28 am

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?
Psider
Propellus Maximus
 
Posts: 679
Joined: Wed Jul 06, 2011 1:32 am

Re: Hover - loses the images

Postby M33R4 on Thu Apr 08, 2021 3:27 am

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
M33R4
Propeller Head
 
Posts: 53
Joined: Wed Oct 07, 2020 7:58 am
Location: UK

Re: Hover - loses the images

Postby Psider on Thu Apr 08, 2021 3:53 am

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'" />
Psider
Propellus Maximus
 
Posts: 679
Joined: Wed Jul 06, 2011 1:32 am

Re: Hover - loses the images

Postby M33R4 on Thu Apr 08, 2021 4:17 am

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
M33R4
Propeller Head
 
Posts: 53
Joined: Wed Oct 07, 2020 7:58 am
Location: UK


Return to Styles, Stylesheets and XML

Who is online

Users browsing this forum: No registered users and 7 guests