Image hover/rollover/mouseover: back button breaks mouseout

Dev Shed Forums Sponsor:

March 7th, 2013, 11:55 AM

jorwesflow

Registered User

Join Date: Mar 2013

Posts: 5

Time spent in forums: 40 m 24 sec
Reputation Power: 0

Image hover/rollover/mouseover: back button breaks mouseout

Please see the three image links in the middle of the page: http://spncolors.com/ . If you hover over and then click, you're taken to the appropriate page. But now click the back button and the image stays frozen in its "mouseover" state, rather than reverting to the "mouseout" state. Firefox and Safari have both shown this problem. Chrome seems to be okay however.
I'm a total amateur here, so any help is appreciated. Here is my code:

Code:

Code:

jQuery(function($) {
$(document).ready(function() {

		// Preload all rollovers
		$("#hoverlink img").each(function() {
			// Set the original src
			rollsrc = $(this).attr("src");
			rollON = rollsrc.replace(/.jpg$/ig,"-over.jpg");
			$("<img>").attr("src", rollON);
		});

		// Navigation rollovers
		$("#hoverlink a").mouseover(function(){
			imgsrc = $(this).children("img").attr("src");
			matches = imgsrc.match(/-over/);

			// don't do the rollover if state is already ON
			if (!matches) {
			imgsrcON = imgsrc.replace(/.jpg$/ig,"-over.jpg"); // strip off extension
			$(this).children("img").attr("src", imgsrcON);
			}

		});
		$("#hoverlink a").mouseout(function(){
			$(this).children("img").attr("src", imgsrc);
		});

	});
});

March 7th, 2013, 01:10 PM

Nilpo

Master of Disaster™

Join Date: Jan 2004

Location: New Springfield, OH

Posts: 863

Folding Points: 600856 Folding Title: Super Ultimate Folder - Level 2

Time spent in forums: 5 Days 16 h 49 m 58 sec
Reputation Power: 1185

Clicking back in Chrome cause the page to be reloaded. Clicking back in other browsers loads the cached view.

One solution would be to write a function that capture mouse movements. If it's not over the images, they should be reset.

I'm sure you could also use a focus handler somewhere to do it is as well. Maybe on the body element. To be honest, I'm not sure what element has focus by default when a page is displayed. I've never had a need to know. It wouldn't be hard to figure out though. Just apply a global handler to every element that alerts what it is.

Realistically though, I wouldn't even worry about it. It's not that big of a deal. Never spend too much time coding around browser behavior. Your visitors probably won't even notice the difference.

__________________

Don't like me? Click it.

Scripting problems? Windows questions? Ask the Windows Guru!

Stay up to date with all of my latest content. Follow me on Twitter!

Help us help you! Post your exact error message with these easy tips!

Last edited by Nilpo : March 7th, 2013 at 01:13 PM.

March 7th, 2013, 01:19 PM

harrjm

Contributing User

Join Date: Jun 2011

Posts: 33

Time spent in forums: 15 h 6 m 53 sec
Reputation Power: 2

Im still not good at jquery so I cant write you the code but would it not be possible to just simulate a mouseout right before it navigates to the new page?

in pseudo code something like:

soapsimage.clicked()
mouseout()
navigate(url = soaps.html)

*bad psuedocode I know lol*

But would that be possible?

March 7th, 2013, 01:33 PM

Nilpo

Master of Disaster™

Join Date: Jan 2004

Location: New Springfield, OH

Posts: 863

Time spent in forums: 5 Days 16 h 49 m 58 sec
Reputation Power: 1185

Quote:

Originally Posted by harrjm

Along those same lines, why not reset them in the click handler for $("#hoverlink a")?

March 7th, 2013, 05:30 PM

jorwesflow

Registered User

Join Date: Mar 2013

Posts: 5

Time spent in forums: 40 m 24 sec
Reputation Power: 0

hey, all. thanks for the discussion. I wish I could run with these suggestions, but I didn't write the original script. It was a copy/paste from a tutorial on implementing these types of image rollovers. Hate to be so needy, but can anyone walk me through this? I would love to ignore it, because it doesn't really bother me, but it's my client that noticed and asked me to fix.

March 7th, 2013, 05:45 PM

Nilpo

Master of Disaster™

Join Date: Jan 2004

Location: New Springfield, OH

Posts: 863

Time spent in forums: 5 Days 16 h 49 m 58 sec
Reputation Power: 1185

Quote:

Originally Posted by jorwesflow

Educate your client.

That being said, I can help you as soon as I'm back at my desk. it's tough to write code on a tablet.

March 7th, 2013, 06:07 PM

jorwesflow

Registered User

Join Date: Mar 2013

Posts: 5

Time spent in forums: 40 m 24 sec
Reputation Power: 0

haha! sounds good

March 14th, 2013, 06:57 PM

jorwesflow

Registered User

Join Date: Mar 2013

Posts: 5

Time spent in forums: 40 m 24 sec
Reputation Power: 0

Quote:

Originally Posted by Nilpo

Educate your client.

That being said, I can help you as soon as I'm back at my desk. it's tough to write code on a tablet.

Hey, Nilpo, I hate to pester, but did you come up with any ideas on this? Thanks in advance!

March 14th, 2013, 11:04 PM

Nilpo

Master of Disaster™

Join Date: Jan 2004

Location: New Springfield, OH

Posts: 863

Time spent in forums: 5 Days 16 h 49 m 58 sec
Reputation Power: 1185

Sorry. Add this line after your jQuery code.

Code:

window.onunload = function(){};

As long as this line appears somewhere where it gets executed, it should fix the problem.

Code:

jQuery(function($) {
$(document).ready(function() {

		// Preload all rollovers
		$("#hoverlink img").each(function() {
			// Set the original src
			rollsrc = $(this).attr("src");
			rollON = rollsrc.replace(/.jpg$/ig,"-over.jpg");
			$("<img>").attr("src", rollON);
		});

		// Navigation rollovers
		$("#hoverlink a").mouseover(function(){
			imgsrc = $(this).children("img").attr("src");
			matches = imgsrc.match(/-over/);

			// don't do the rollover if state is already ON
			if (!matches) {
			imgsrcON = imgsrc.replace(/.jpg$/ig,"-over.jpg"); // strip off extension
			$(this).children("img").attr("src", imgsrcON);
			}

		});
		$("#hoverlink a").mouseout(function(){
			$(this).children("img").attr("src", imgsrc);
		});

	});
});
window.onunload = function(){};