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
1 2 3 4 5 6 7 8 9 10 11 | <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> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | var picture1 = "image1.png";var picture2 = "image2.png";if (document.images) {image1 = new Image();image1.src = picture1image2 = 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.