JavaScript Change Image on Mouse Hover
 |
| javascript image change on hover |
Hi Guys Today We will learn How To Create JavaScript Change Image on Mouse Hover.
Image Will Change Automatically When User Move Her mouse over The Current Image.
Create 2 files and 2 image named given below.
1.index.html
2.script.js
3.image1.png
4.image2.png
 |
| javascript image change on hover |
Now Copy the Below Codes for Certain File
<html> <head> <title>Image Change On Mouse Hover in JavaScript</title> <script type="text/javascript" src="script.js"></script> </head> <body> <h2>Move Your Mouse Over The Image To Change The Image</h2> <a href="#" onMouseOver="mover(image1)" onMouseOut="mout(image2)"> <img name="change" src="image1.png" border="0"></a> </body> </html>
var picture1 = "image1.png";
var picture2 = "image2.png";
if (document.images) {
image1 = new Image();
image1.src = picture1
image2 = new Image();
image2.src = picture2;
}
function mover(img){
document["change"].src = img.src;
}
function mout(img){
document["change"].src = img.src;
}
ok Now you have Successfully Created JavaScript Image Change on Mouse Hover.
Just Run your Index.html file to View Result.
Thank You For Visit.
No comments:
Post a Comment
Thank You for Your Comment
Note: Only a member of this blog may post a comment.