Delay onMouseOut

I am using the following code to get the OnMouseOver and onMouseOut effect:

<html>
<head>
     <title>test</title>    
     <script language="JavaScript">
     <!--
     // HighLight Pictures
     function canManipulateImages() {
          if (document.images)
               return true;
          else
               return false;
     }

     gImageCapableBrowser = canManipulateImages();

     function preLoadImage(imageURL) {
          if (gImageCapableBrowser) {
               image = new Image();
               image.src = imageURL;
               return image;
          }
     }

     function changeButtonImage(buttonName,sourceImage) {
          if (gImageCapableBrowser) {
               document[buttonName].src = sourceImage.src;
               return true;
          }
     }
     
     LanguageEnglishActive = preLoadImage("images/button_english.gif");
     LanguageInactive = preLoadImage("images/logo500_bottom_right_bottom.gif");
     //-->
     </script>
     
</head>
<body>

<a href="ie40/choosegb.shtml"><img
src="images/english_small.gif" width=48 height=27 border=0 vspace=2
onMouseOver="changeButtonImage('Language',LanguageEnglishActive); return false"
onMouseOut="changeButtonImage('Language',LanguageInactive); return false"></a><br>
<img src="images/logo500_bottom_right_bottom.gif" width=140 height=44 border=0 name="Language"><br>

</body>
</html>

Is it possible to add a 2 seconds delay at the onMouseOut.
The image has to change after 2 second! This Only at onMouseOut! Is this Possible?
weversbvAsked:
Who is Participating?
 
gordonmcmullanConnect With a Mentor Commented:
Tested and working in IE5 NS5 and NS6, you need to have a name attribute in the image for NS4 which must be the same ans the id value.

Hope this helps

Gordon McMullan

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
    <title>Swap Image Example</title>
<script language="JavaScript" type="text/javascript">
// HighLight Pictures
ImageCapableBrowser = (document.images) ? true : false
var timerImageRefresh = 0;
function preLoadImage(imageURL) {
    if (ImageCapableBrowser) {
         image = new Image();
         image.src = imageURL;
         return imageURL;
    }
}

function changeButtonImage(buttonName,sourceImage,delay){
    if (ImageCapableBrowser) {
         clearTimeout(timerImageRefresh);
               objTargetImg = document.images[buttonName]
          timerImageRefresh = setTimeout("objTargetImg.src = \'" + sourceImage + "\'",delay);
     }
}

LanguageEnglishActive = preLoadImage("images/button_english.gif");
LanguageInactive = preLoadImage("images/logo500_bottom_right_bottom.gif");
</script>

</head>

<body>

<a href="#"
onMouseOver="changeButtonImage('Language',LanguageEnglishActive,0)"
onMouseOut="changeButtonImage('Language',LanguageInactive,2000)">
<img src="images/english_small.gif" width=140 height=44 border=0 alt=""></a><br>
<img src="images/logo500_bottom_right_bottom.gif" width=140 height=44 border=0 name="Language" id="Language">

</body>
</html>
0
 
COBOLdinosaurCommented:
Try:
onMouseOut="setTimeout('changeButtonImage(\"Language\",LanguageInactive)',2000);return false;"
Cd&
0
 
weversbvAuthor Commented:
It will return an error!
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
COBOLdinosaurCommented:
What is the error?

Cd&
0
 
gordonmcmullanCommented:
Well This works but its really clunky and ugly as sin anyone wanna tidy it up :)

<html>
<head>
    <title>test</title>    
    <script language="JavaScript">
    <!--
    // HighLight Pictures
    function canManipulateImages() {
         if (document.images)
              return true;
         else
              return false;
    }

    gImageCapableBrowser = canManipulateImages();

    function preLoadImage(imageURL) {
         if (gImageCapableBrowser) {
              image = new Image(256,128);
              image.src = imageURL;
              return image;
         }
    }

    function changeButtonImage(buttonName,sourceImage,delay) {
         if (gImageCapableBrowser) {
              setTimeout("document." + buttonName + ".src = \'"+ sourceImage + "\';", delay);
              return true;
         }
    }
   
    LanguageEnglishActive = preLoadImage("images/button_english.gif");
    LanguageInactive = preLoadImage("images/logo500_bottom_right_bottom.gif");
    //-->
    </script>
   
</head>
<body>

<a href="ie40/choosegb.shtml"><img
src="images/english_small.gif" width=48 height=27 border=0 vspace=2
onMouseOver="changeButtonImage('Language','images/button_english.gif',0); return false"
onMouseOut="changeButtonImage('Language','images/logo500_bottom_right_bottom.gif',2000); return false"></a><br>
<img src="images/logo500_bottom_right_bottom.gif" width=140 height=44 border=0 id="Language" name="Language"><br>

</body>
</html>


It's been a long day
0
 
nzjonboyCommented:
here are two ways of doin it, one is gordon's (above) revamped and the other is dinos revamped.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Delay Onmouseout</title>    
<script language="JavaScript">
<!--

   // HighLight Pictures
   function canManipulateImages() {
        if (document.images)
             return true;
        else
             return false;
   }

   gImageCapableBrowser = canManipulateImages();

   function preLoadImage(imageURL) {
        if (gImageCapableBrowser) {
             image = new Image(256,128);
             image.src = imageURL;
             return image;
        }
   }

   function changeButtonImage(buttonName,sourceImage,delay) {
        if (gImageCapableBrowser) {
             setTimeout("document[\'" + buttonName.id + "\'].src = \'" + sourceImage.src + "\';", delay);
             return true;
        }
   }
   
   LanguageEnglishActive = preLoadImage("images/button_english.gif");
   LanguageInactive = preLoadImage("images/logo500_bottom_right_bottom.gif");

//-->
</script>
</head>
<body>

<a href="ie40/choosegb.shtml"><img
src="images/english_small.gif" width=48 height=27 border=0 vspace=2
onMouseOver="changeButtonImage(Language,LanguageEnglishActive,0); return false"
onMouseOut="changeButtonImage(Language,LanguageInactive,2000); return false"></a><br>
<img src="images/logo500_bottom_right_bottom.gif" width=140 height=44 border=0 id="Language" name="Language"><br>

</body>
</html>



OR


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Delay Onmouseout</title>    
<script language="JavaScript">
<!--

   // HighLight Pictures
   function canManipulateImages() {
        if (document.images)
             return true;
        else
             return false;
   }

   gImageCapableBrowser = canManipulateImages();

   function preLoadImage(imageURL) {
        if (gImageCapableBrowser) {
             image = new Image(256,128);
             image.src = imageURL;
             return image;
        }
   }

   function changeButtonImage(buttonName,sourceImage) {
        if (gImageCapableBrowser) {
                document[buttonName.id].src = sourceImage.src;
             return true;
        }
   }
   
   LanguageEnglishActive = preLoadImage("images/button_english.gif");
   LanguageInactive = preLoadImage("images/logo500_bottom_right_bottom.gif");

//-->
</script>
</head>
<body>

<a href="ie40/choosegb.shtml"><img
src="images/english_small.gif" width=48 height=27 border=0 vspace=2
onMouseOver="changeButtonImage(Language,LanguageEnglishActive); return false"
onMouseOut="setTimeout('changeButtonImage(Language,LanguageInactive);',2000); return false"></a><br>
<img src="images/logo500_bottom_right_bottom.gif" width=140 height=44 border=0 id="Language" name="Language"><br>

</body>
</html>


nzjonboy
0
 
weversbvAuthor Commented:
nzjonboy:

The line:
document[buttonName.id].src = sourceImage.src;
had to be change to:

document[buttonName].src = sourceImage.src;
0
 
weversbvAuthor Commented:
I am using this code for three images. They all will be reste to the same image. The code works! When I go over an image the ..Active image will appear. When I go out of the image the delay starts and after the dealy the reste image will appear. But when I move fast from image 1 to image 2 the delay of image 1 will reset the image 2. This even when the mosue is over the image 2!!
Is it possible the reset the delay when I am over a new image or is it possible to reset the setTimeout??
0
 
weversbvAuthor Commented:
0
 
gordonmcmullanCommented:
You need to clear the TimeOut you are setting this should do it

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Delay Onmouseout</title>    
<script language="JavaScript" type="text/javascript">
<!--
  // HighLight Pictures
  gImageCapableBrowser = (document.images) ? true : false
  var timerImageRefresh;
  function preLoadImage(imageURL) {
       if (gImageCapableBrowser) {
            image = new Image();
            image.src = imageURL;
            return image;
       }
  }

  function changeButtonImage(buttonName,sourceImage,delay) {
       if (gImageCapableBrowser) {
                  clearTimeout(timerImageRefresh);
            timerImageRefresh = setTimeout("document[\'" + buttonName.id + "\'].src = \'" + sourceImage.src + "\';", delay);
            return true;
       }
  }
 
  LanguageEnglishActive = preLoadImage("images/button_english.gif");
  LanguageInactive = preLoadImage("images/logo500_bottom_right_bottom.gif");

//-->
</script>
</head>
<body>

<a href="ie40/choosegb.shtml"><img
src="images/english_small.gif" width=48 height=27 border=0 vspace=2
onMouseOver="changeButtonImage(Language,LanguageEnglishActive,0); return false"
onMouseOut="changeButtonImage(Language,LanguageInactive,2000); return false"></a><br>
<img src="images/logo500_bottom_right_bottom.gif" width=140 height=44 border=0 id="Language" name="Language"><br>

</body>
</html>
0
 
weversbvAuthor Commented:
The script does work!
Thank you.

But still I have to change:
timerImageRefresh = setTimeout("document[\'" + buttonName.id + "\'].src = \'" + sourceImage.src + "\';", delay);

to:
timerImageRefresh = setTimeout("document[\'" + buttonName + "\'].src = \'" + sourceImage.src
+ "\';", delay);

Why do I have to remove the .id??
See www.dracotools.com/home.shtml
0
 
weversbvAuthor Commented:
Sorry,
but the code does not work in Netscape!!
I tried it in version 6.
The onmouseover does not work!
Can it be fixed??
0
 
weversbvAuthor Commented:
The follwoing code will work on netscape 6 and IE 5!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
     <title>Swap Image Example</title>
<script language="JavaScript" type="text/javascript">
// HighLight Pictures
gImageCapableBrowser = (document.images) ? true : false

function preLoadImage(imageURL) {
     if (gImageCapableBrowser) {
          image = new Image();
          image.src = imageURL;
          return imageURL;
     }
}

function changeButtonImage(buttonName,sourceImage,delay){
     clearTimeout(timerImageRefresh);
     theImg=document.getElementById(buttonName);
     theImg.setAttribute('src',sourceImage);
}

LanguageEnglishActive = preLoadImage("images/button_english.gif");
LanguageInactive = preLoadImage("images/logo500_bottom_right_bottom.gif");
</script>

</head>

<body>

<a href="#"
onMouseOver="changeButtonImage('Language',LanguageEnglishActive,0)"
onMouseOut="changeButtonImage('Language',LanguageInactive,1000)">
<img src="images/logo500_bottom_right_bottom.gif" width=140 height=44 border=0 alt=""></a><br>

<img src="images/logo500_bottom_right_bottom.gif" width=140 height=44 border=0 id="Language">

</body>
</html>

Will it work on older browsers also??
And how to add the delay function??

0
 
gordonmcmullanCommented:
Ah, from your original code I assumed NS4 compatability was not needed as NS4 doesent have an onMouseover event on images, you need to wrap the image in an <a> tag which contains the event handlers.

Not sure about NN6 though, its a DOM capable browser so this stuff should work, I don't have it installed here at the moment so I can't test it.

here's the fixed code for IE4+ and NS4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Delay Onmouseout</title>    
<script language="JavaScript" type="text/javascript">
<!--
 // HighLight Pictures
 gImageCapableBrowser = (document.images) ? true : false
 var timerImageRefresh;
 function preLoadImage(imageURL) {
      if (gImageCapableBrowser) {
           image = new Image();
           image.src = imageURL;
           return image;
      }
 }

 function changeButtonImage(buttonName,sourceImage,delay) {
      if (gImageCapableBrowser) {
            clearTimeout(timerImageRefresh);
           timerImageRefresh = setTimeout("document[\'" + buttonName.name + "\'].src = \'" + sourceImage.src
+ "\';", delay);
           return true;
      }
 }
 
 LanguageEnglishActive = preLoadImage("images/button_english.gif");
 LanguageInactive = preLoadImage("images/logo500_bottom_right_bottom.gif");

//-->
</script>
</head>
<body>

<a href="ie40/choosegb.shtml"
onMouseOver="changeButtonImage(Language,LanguageEnglishActive,0); return false"
onMouseOut="changeButtonImage(Language,LanguageInactive,2000); return false"><img
src="images/english_small.gif" width=48 height=27 border=0 vspace=2></a><br>
<img src="images/logo500_bottom_right_bottom.gif" width=140 height=44 border=0 id="Language" name="Language"><br>

</body>
</html>
0
All Courses

From novice to tech pro — start learning today.