Solved

Delay onMouseOut

Posted on 2001-08-20
14
514 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
 
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

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

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…

758 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now