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
image-rollover-javascript
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
image-rollover-javascript
