Solved

Delay onMouseOut

Posted on 2001-08-20
14
523 Views
Last Modified: 2012-08-14
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?
0
Comment
Question by:weversbv
  • 7
  • 4
  • 2
  • +1
14 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6406453
Try:
onMouseOut="setTimeout('changeButtonImage(\"Language\",LanguageInactive)',2000);return false;"
Cd&
0
 

Author Comment

by:weversbv
ID: 6406495
It will return an error!
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6406575
What is the error?

Cd&
0
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 1

Expert Comment

by:gordonmcmullan
ID: 6407427
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
 
LVL 3

Expert Comment

by:nzjonboy
ID: 6407877
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
 

Author Comment

by:weversbv
ID: 6408708
nzjonboy:

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

document[buttonName].src = sourceImage.src;
0
 

Author Comment

by:weversbv
ID: 6408778
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
 

Author Comment

by:weversbv
ID: 6408783
0
 
LVL 1

Expert Comment

by:gordonmcmullan
ID: 6408925
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
 

Author Comment

by:weversbv
ID: 6408956
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
 

Author Comment

by:weversbv
ID: 6409651
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
 

Author Comment

by:weversbv
ID: 6409856
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
 
LVL 1

Expert Comment

by:gordonmcmullan
ID: 6409949
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
 
LVL 1

Accepted Solution

by:
gordonmcmullan earned 100 total points
ID: 6412344
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

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
How to combine and minify CSS and JS files 5 15
Page auto-refreshes when scrolled on iPhone. 5 53
Insert Button on a table 16 36
Html value of radio 14 27
Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

791 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question