weversbv
asked on
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(buttonNa me,sourceI mage) {
if (gImageCapableBrowser) {
document[buttonName].src = sourceImage.src;
return true;
}
}
LanguageEnglishActive = preLoadImage("images/butto n_english. gif");
LanguageInactive = preLoadImage("images/logo5 00_bottom_ right_bott om.gif");
//-->
</script>
</head>
<body>
<a href="ie40/choosegb.shtml" ><img
src="images/english_small. gif" width=48 height=27 border=0 vspace=2
onMouseOver="changeButtonI mage('Lang uage',Lang uageEnglis hActive); return false"
onMouseOut="changeButtonIm age('Langu age',Langu ageInactiv e); return false"></a><br>
<img src="images/logo500_bottom _right_bot tom.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?
<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(buttonNa
if (gImageCapableBrowser) {
document[buttonName].src = sourceImage.src;
return true;
}
}
LanguageEnglishActive = preLoadImage("images/butto
LanguageInactive = preLoadImage("images/logo5
//-->
</script>
</head>
<body>
<a href="ie40/choosegb.shtml"
src="images/english_small.
onMouseOver="changeButtonI
onMouseOut="changeButtonIm
<img src="images/logo500_bottom
</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?
ASKER
It will return an error!
What is the error?
Cd&
Cd&
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(buttonNa me,sourceI mage,delay ) {
if (gImageCapableBrowser) {
setTimeout("document." + buttonName + ".src = \'"+ sourceImage + "\';", delay);
return true;
}
}
LanguageEnglishActive = preLoadImage("images/butto n_english. gif");
LanguageInactive = preLoadImage("images/logo5 00_bottom_ right_bott om.gif");
//-->
</script>
</head>
<body>
<a href="ie40/choosegb.shtml" ><img
src="images/english_small. gif" width=48 height=27 border=0 vspace=2
onMouseOver="changeButtonI mage('Lang uage','ima ges/button _english.g if',0); return false"
onMouseOut="changeButtonIm age('Langu age','imag es/logo500 _bottom_ri ght_bottom .gif',2000 ); return false"></a><br>
<img src="images/logo500_bottom _right_bot tom.gif" width=140 height=44 border=0 id="Language" name="Language"><br>
</body>
</html>
It's been a long day
<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(buttonNa
if (gImageCapableBrowser) {
setTimeout("document." + buttonName + ".src = \'"+ sourceImage + "\';", delay);
return true;
}
}
LanguageEnglishActive = preLoadImage("images/butto
LanguageInactive = preLoadImage("images/logo5
//-->
</script>
</head>
<body>
<a href="ie40/choosegb.shtml"
src="images/english_small.
onMouseOver="changeButtonI
onMouseOut="changeButtonIm
<img src="images/logo500_bottom
</body>
</html>
It's been a long day
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(buttonNa me,sourceI mage,delay ) {
if (gImageCapableBrowser) {
setTimeout("document[\'" + buttonName.id + "\'].src = \'" + sourceImage.src + "\';", delay);
return true;
}
}
LanguageEnglishActive = preLoadImage("images/butto n_english. gif");
LanguageInactive = preLoadImage("images/logo5 00_bottom_ right_bott om.gif");
//-->
</script>
</head>
<body>
<a href="ie40/choosegb.shtml" ><img
src="images/english_small. gif" width=48 height=27 border=0 vspace=2
onMouseOver="changeButtonI mage(Langu age,Langua geEnglishA ctive,0); return false"
onMouseOut="changeButtonIm age(Langua ge,Languag eInactive, 2000); return false"></a><br>
<img src="images/logo500_bottom _right_bot tom.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(buttonNa me,sourceI mage) {
if (gImageCapableBrowser) {
document[buttonName.id].sr c = sourceImage.src;
return true;
}
}
LanguageEnglishActive = preLoadImage("images/butto n_english. gif");
LanguageInactive = preLoadImage("images/logo5 00_bottom_ right_bott om.gif");
//-->
</script>
</head>
<body>
<a href="ie40/choosegb.shtml" ><img
src="images/english_small. gif" width=48 height=27 border=0 vspace=2
onMouseOver="changeButtonI mage(Langu age,Langua geEnglishA ctive); return false"
onMouseOut="setTimeout('ch angeButton Image(Lang uage,Langu ageInactiv e);',2000) ; return false"></a><br>
<img src="images/logo500_bottom _right_bot tom.gif" width=140 height=44 border=0 id="Language" name="Language"><br>
</body>
</html>
nzjonboy
<!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(buttonNa
if (gImageCapableBrowser) {
setTimeout("document[\'" + buttonName.id + "\'].src = \'" + sourceImage.src + "\';", delay);
return true;
}
}
LanguageEnglishActive = preLoadImage("images/butto
LanguageInactive = preLoadImage("images/logo5
//-->
</script>
</head>
<body>
<a href="ie40/choosegb.shtml"
src="images/english_small.
onMouseOver="changeButtonI
onMouseOut="changeButtonIm
<img src="images/logo500_bottom
</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(buttonNa
if (gImageCapableBrowser) {
document[buttonName.id].sr
return true;
}
}
LanguageEnglishActive = preLoadImage("images/butto
LanguageInactive = preLoadImage("images/logo5
//-->
</script>
</head>
<body>
<a href="ie40/choosegb.shtml"
src="images/english_small.
onMouseOver="changeButtonI
onMouseOut="setTimeout('ch
<img src="images/logo500_bottom
</body>
</html>
nzjonboy
ASKER
nzjonboy:
The line:
document[buttonName.id].sr c = sourceImage.src;
had to be change to:
document[buttonName].src = sourceImage.src;
The line:
document[buttonName.id].sr
had to be change to:
document[buttonName].src = sourceImage.src;
ASKER
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??
Is it possible the reset the delay when I am over a new image or is it possible to reset the setTimeout??
ASKER
See the code at www.dracotools.com/home.shtml
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(buttonNa me,sourceI mage,delay ) {
if (gImageCapableBrowser) {
clearTimeout(timerImageRef resh);
timerImageRefresh = setTimeout("document[\'" + buttonName.id + "\'].src = \'" + sourceImage.src + "\';", delay);
return true;
}
}
LanguageEnglishActive = preLoadImage("images/butto n_english. gif");
LanguageInactive = preLoadImage("images/logo5 00_bottom_ right_bott om.gif");
//-->
</script>
</head>
<body>
<a href="ie40/choosegb.shtml" ><img
src="images/english_small. gif" width=48 height=27 border=0 vspace=2
onMouseOver="changeButtonI mage(Langu age,Langua geEnglishA ctive,0); return false"
onMouseOut="changeButtonIm age(Langua ge,Languag eInactive, 2000); return false"></a><br>
<img src="images/logo500_bottom _right_bot tom.gif" width=140 height=44 border=0 id="Language" name="Language"><br>
</body>
</html>
<!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(buttonNa
if (gImageCapableBrowser) {
clearTimeout(timerImageRef
timerImageRefresh = setTimeout("document[\'" + buttonName.id + "\'].src = \'" + sourceImage.src + "\';", delay);
return true;
}
}
LanguageEnglishActive = preLoadImage("images/butto
LanguageInactive = preLoadImage("images/logo5
//-->
</script>
</head>
<body>
<a href="ie40/choosegb.shtml"
src="images/english_small.
onMouseOver="changeButtonI
onMouseOut="changeButtonIm
<img src="images/logo500_bottom
</body>
</html>
ASKER
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
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
ASKER
Sorry,
but the code does not work in Netscape!!
I tried it in version 6.
The onmouseover does not work!
Can it be fixed??
but the code does not work in Netscape!!
I tried it in version 6.
The onmouseover does not work!
Can it be fixed??
ASKER
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(buttonNa me,sourceI mage,delay ){
clearTimeout(timerImageRef resh);
theImg=document.getElement ById(butto nName);
theImg.setAttribute('src', sourceImag e);
}
LanguageEnglishActive = preLoadImage("images/butto n_english. gif");
LanguageInactive = preLoadImage("images/logo5 00_bottom_ right_bott om.gif");
</script>
</head>
<body>
<a href="#"
onMouseOver="changeButtonI mage('Lang uage',Lang uageEnglis hActive,0) "
onMouseOut="changeButtonIm age('Langu age',Langu ageInactiv e,1000)">
<img src="images/logo500_bottom _right_bot tom.gif" width=140 height=44 border=0 alt=""></a><br>
<img src="images/logo500_bottom _right_bot tom.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??
<!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(buttonNa
clearTimeout(timerImageRef
theImg=document.getElement
theImg.setAttribute('src',
}
LanguageEnglishActive = preLoadImage("images/butto
LanguageInactive = preLoadImage("images/logo5
</script>
</head>
<body>
<a href="#"
onMouseOver="changeButtonI
onMouseOut="changeButtonIm
<img src="images/logo500_bottom
<img src="images/logo500_bottom
</body>
</html>
Will it work on older browsers also??
And how to add the delay function??
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(buttonNa me,sourceI mage,delay ) {
if (gImageCapableBrowser) {
clearTimeout(timerImageRef resh);
timerImageRefresh = setTimeout("document[\'" + buttonName.name + "\'].src = \'" + sourceImage.src
+ "\';", delay);
return true;
}
}
LanguageEnglishActive = preLoadImage("images/butto n_english. gif");
LanguageInactive = preLoadImage("images/logo5 00_bottom_ right_bott om.gif");
//-->
</script>
</head>
<body>
<a href="ie40/choosegb.shtml"
onMouseOver="changeButtonI mage(Langu age,Langua geEnglishA ctive,0); return false"
onMouseOut="changeButtonIm age(Langua ge,Languag eInactive, 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_bot tom.gif" width=140 height=44 border=0 id="Language" name="Language"><br>
</body>
</html>
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(buttonNa
if (gImageCapableBrowser) {
clearTimeout(timerImageRef
timerImageRefresh = setTimeout("document[\'" + buttonName.name + "\'].src = \'" + sourceImage.src
+ "\';", delay);
return true;
}
}
LanguageEnglishActive = preLoadImage("images/butto
LanguageInactive = preLoadImage("images/logo5
//-->
</script>
</head>
<body>
<a href="ie40/choosegb.shtml"
onMouseOver="changeButtonI
onMouseOut="changeButtonIm
src="images/english_small.
<img src="images/logo500_bottom
</body>
</html>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
onMouseOut="setTimeout('ch
Cd&