#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    5
    Rep 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);
    		});
    
    	});
    });
  2. #2
  3. Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jan 2004
    Location
    New Springfield, OH
    Posts
    1,250
    Rep Power
    1469
    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.
    Last edited by Nilpo; March 7th, 2013 at 02:13 PM.
    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!
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2011
    Posts
    33
    Rep Power
    4
    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?
  6. #4
  7. Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jan 2004
    Location
    New Springfield, OH
    Posts
    1,250
    Rep Power
    1469
    Originally Posted by harrjm
    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?
    Along those same lines, why not reset them in the click handler for $("#hoverlink a")?
    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!
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    5
    Rep 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.
  10. #6
  11. Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jan 2004
    Location
    New Springfield, OH
    Posts
    1,250
    Rep Power
    1469
    Originally Posted by jorwesflow
    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.
    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.
    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!
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    5
    Rep Power
    0
    haha! sounds good
  14. #8
  15. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    5
    Rep Power
    0
    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!
  16. #9
  17. Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jan 2004
    Location
    New Springfield, OH
    Posts
    1,250
    Rep Power
    1469
    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(){};
    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!
  18. #10
  19. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    5
    Rep Power
    0
    perfect! thank you so much!
  20. #11
  21. Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jan 2004
    Location
    New Springfield, OH
    Posts
    1,250
    Rep Power
    1469
    Originally Posted by jorwesflow
    perfect! thank you so much!
    No problemo! I'm glad I could help.

    I like the ones with nice simple fixes.
    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!

IMN logo majestic logo threadwatch logo seochat tools logo