HTML Help

piper43 · Joined: 31 Oct 2009 Posts: 7

I've just installed the Image Rollover Javascript located at http://www.htmlcodetutorial.com/images/images_famsupp_80.html It works great except for one small issue. If I click the image (link) the linked page appears as expected. However, if I use the browser back button the original page displays the mouse over image. To get the original image I have to click outside the image then run the mouse over the image and back to get it to reset. This will be a problem for my visitors since I am using this technique to control 6 identical buttons that change color. If they use the back button they will see one button in the "select" position and will be confused. Is there a way to overcome this problem? BTW, I have named each button separately in the code as explained in the code example.

PayneLess Designs · Joined: 28 Feb 2007 Posts: 3596 Location: Biloxi, MS

Can't help you if you don't post YOUR code or a link to your problem page(s) online. Make sure you have the "onMouseOut" part and that all paths are correct for them.

Check page link you gave for code and returning to page using browser's back button worked just fine.

piper43 · Joined: 31 Oct 2009 Posts: 7

"Please do not PM me for help". I would not do that. Thanks for your quick reply anyway.

My website is not live yet so I have no URL to give you. I did learn something though after I received your reply. I tried Windows Explorer (I use Firefox almost exclusively) and all worked fine. So it appears to be a browser issue. I will wait until my site goes live and then try to figure out whats going on. Thanks again.

PayneLess Designs · Joined: 28 Feb 2007 Posts: 3596 Location: Biloxi, MS

The "☠ Please do not PM me for help. ☠" is in my signature and is for everyone. :P

The only way we can help you is to see the code you are using. Any images you use must have a full path or give the paths separately if using relative paths in the actual code. That way, we can reproduce the page in the browser as you see it.

The code on the page you used worked just fine in both Firefox and IE for me. Use the "Code" buttons and place your code between the code tags to post it here.

piper43 · Joined: 31 Oct 2009 Posts: 7

I've published the relevant code to http://www.onlinecalculatorhub.com/test It's only one button but it still behaves the same. Just in case I did not explain the problem clearly, all I did was click the image (button) to proceed to the linked page then I immediately hit the browser back button to get back to the original page.

PayneLess Designs · Joined: 28 Feb 2007 Posts: 3596 Location: Biloxi, MS

Works fine in Firefox and IE for me. Might make sure the page at least is basically correct:

Quote: line 6 column 1 - Warning: discarding unexpected </style>
line 63 column 13 - Warning: missing <tr>
line 84 column 1 - Warning: discarding unexpected <body>

Have you got JavaScript turned on in Firefox if that's the browser not working for you?

piper43 · Joined: 31 Oct 2009 Posts: 7

Those bugs arose when I did the quick cut and paste to make the test pages.

Yes, I do have Javascript enabled. I also accessed the test page on two other computers but got the same problem. I can rollover and rollout of the image fine and get the image switching on all 3 computers. It's simply a problem of the cached page being stuck in the mouseover state. As soon as I click away from the image (after bringing the page back using the back button) then the script acknowledges that I have rolled out.

Not to worry. I've got a lot of other stuff to do. I'll get back to this at a later time. Thanks again for taking a look.

piper43 · Joined: 31 Oct 2009 Posts: 7

After some further experimenting I've found that the script will now work once when I click the link, move to the next page then use the back button. Subsequent attempts will lock the button image in the mouseover state. If I close the browser and start again the sequence will repeat. I have no clue what I did to get this partial response. Perhaps it was doing this all along, I don't know. In any case it's still a problem.

PayneLess Designs · Joined: 28 Feb 2007 Posts: 3596 Location: Biloxi, MS

Strange because it is working just fine for me in Firefox or IE. Will try to take a closer look at code you used.

No chance your browser is not caching any pages to use as history or storing the images needed?

piper43 · Joined: 31 Oct 2009 Posts: 7

I think I've figured out what's going on. Apparently Firefox (from 1.5 on) uses backward-forward caching or bfcache. During a single browser session it will preserve Javascript states of pages that the user navigates away from. This means that when I click on the button the rollover state is preserved as the page is replaced by the linked page. When I use the back button I get the original page with the rollover state still active. To reset the state I make the mouse active by clicking somewhere on the page then I move the mouse over the button then back away from the button. Here is a link to Mozilla which explains bfcache https://developer.mozilla.org/En/Using_Firefox_1.5_caching

For some reason after starting a new browser session I have been able on occasion to go forwards and backwards once (click button, move to linked page, hit back button) and get the rollout state but thereafter for further moves forward and backward I always get the rollover state which I have to reset.

To cure the problem I wrote an .htaccess file to prevent the browser from caching the "home" page and everything now works fine.

This does not explain why you had no problem with your Firefox installation. That leaves me mystified!

For the next 24 hours or so I will leave the following links on the server

http://www.onlinecalculatorhub.com/test (caching allowed)
http://www.onlinecalculatorhub.com/ (caching not allowed)

BTW, I tried other rollover scripts and they behave the same way so I'm pretty certain it is not a script error.

One last thought - If the script could reset the rollout state just after the button click and before the new page loaded that might be an alternate solution.

PayneLess Designs · Joined: 28 Feb 2007 Posts: 3596 Location: Biloxi, MS

OK. Tried both links you gave. It is not a problem with Firefox or any browser checked here. Has to be your end. :P

You could try using an image preloader and load the images and see if the cached link works ok for you.

MrPumuckel · Joined: 03 Nov 2009 Posts: 2

hi!

just read your thread because i have/had the same problem. Except that it's not needed to click anywhere before you can hover hte images back to normal state.

however, my solution simply was to put the image to normal state onclick:

Code: <td height="20px" background="menu-button.gif" align="center" valign="middle" onmouseover="this.style.background='url(menu-button2.gif)';" onmouseout="this.style.background='url(menu-button.gif)';" onclick="window.location.href='cash_fuer_nix_paidmailer.html';this.style.background='url(menu-button.gif)';" style="cursor:pointer;">

maybe that's not a "professional design" but it works. :)

i guess you both have different cache-settings on server side, that's why it appears only in some cases..?!

piper43 · Joined: 31 Oct 2009 Posts: 7

Thanks for contributing to this thread. I can now eliminate the possibility that there was a local problem on my computers. Your fix makes sense and I will try it out and report back.

You're right, it's not needed to click anywhere before hovering over and away from the image. Clicking away from the image only removes the dotted focus box which has nothing to do with the workings of the script. I got confused early on when I tried to figure out what was happening.

Thanks again.