brainsmith
11-05-2012, 09:28 AM
Is there any method of implementing rollover images with JavaScript? I wish to have an explanation at length.
vwphillips
11-05-2012, 03:28 PM
4 examples of rollovers using inline event calls
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<script type="text/javascript">
// it is better to preload the mouseover images
var ary=['http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg','http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg'];
for (var src,z0=0;z0<ary.length;z0++){
src=ary[z0];
ary[z0]=new Image();
ary[z0].src=src;
}
function Swap(img,src){
img.src=src;
}
function Swap2(img,ary){
img.src=ary.src;
}
function Swap3(img,src){
if (!img.save){
img.save=img.src;
}
img.src=src||img.save;
}
</script>
</head>
<body>
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" onmouseover="this.src='http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg';" onmouseout="this.src='http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg';"/>
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" onmouseover="Swap(this,'http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg');" onmouseout="Swap(this,'http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg');"/>
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" onmouseover="Swap2(this,ary[1]);" onmouseout="Swap2(this,ary[0]);"/>
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" onmouseover="Swap3(this,'http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg');" onmouseout="Swap3(this);"/>
</body>
</html>
Powered by vBulletin® Version 4.2.2 Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.