Results 1 to 2 of 2

Thread: Image hover/rollover/mouseover: back button breaks mouseout

  1. #1
    Join Date
    Mar 2013

    Image hover/rollover/mouseover: back button breaks mouseout

    Please see the three image links in the middle of the page. 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. The problem is seen in Firefox and Safari, but Chrome seems to be okay. Sometimes in Firefox, the image will mouseout on its own after a few seconds. I'm a total amateur here, so any help is appreciated. Here is my 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
    Join Date
    Mar 2013
    wow, sorry. forgot the link to the site: http://www.spncolors.com

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center

Recent Articles