image rollover effect with javascript image object
- we create a image object with new Image();
- set a source attribute to test1.jpg.
- create onmouseover even function ,then set image object src to test2.jpg
- create onmouseout event function,then set image object src to test1.jpg
- to test click even we can see a small alert box.
Download Sorce Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <html>
<head>
<title>Image Roll over</title>
</head>
<body>
<div id="imagerolover"></div>
<script>
var myimage=new Image(); //create a image object
myimage.src="test1.jpg";//initially set test1.jpg as src attribute
//onmouseover set test2.jpg as src
myimage.onmouseover=function(){
this.src="test2.jpg";
}
//on mouseout set test1.jpg src again
myimage.onmouseout=function(){
this.src="test1.jpg";
}
//create click event
myimage.onclick=function(){
alert('U clicked me');
}
//get imagerolover div element by id and append the image
document.getElementById('imagerolover').appendChild(myimage);
</script>
</body>
</html> |
Download Sorce Code
Popularity: 9% [?]
Related Articles
No user responded in this post
Leave A Reply