This is a small javascript that changes an image on mouseover. Run your mouse on the image above to see the rollover effect. The image contains a link and is a great script for any webpage.
The mouseover script is also useful for those learning javascript. Have a look at the code and see how easy it is to follow.
Works with most browsers, IE 4 and above. Not with netscape.
Installation:
STEP 1.
Make 2 images which you would like to display. You can name them #1 and #2 if you wish and they can be jpg or gif format. Upload the images to your server.
STEP 2
Copy the code below and paste this between the <head> and </head> tags of your html document. Point the script to where the images reside on your webhost. By this I mean change image source lines:
image1.src = 'images/rollover1.jpg' and
image2.src='images/rollover2.jpg'
The lines in red should show where your images are stored and your image name. The example shows that my images are stored in the images folder and the names are rollover1.jpg and rollover2.jpg. You may need to use your full url such as http://wwww.yoursite.com/image1.jpg
<script language="Javascript">
if (document.images)
{ image1 = new Image image2 = new Image image1.src = 'images/rollover1.jpg' image2.src
= 'images/rollover2.jpg' } </script>
STEP 3.Copy the code below and paste this into the body of your html document, where you want the images to appear on your webpage.
Again change the image source to suit at this line; img src="images/rollover1.jpg"
(Note that you only need to change the image1 here. The second image is called by the script.)
<a href="http://www.siivananda.com"
onMouseOver="document.rollover.src=image2.src" onMouseOut="document.rollover.src=image1.src">
<img src="images/rollover1.jpg" border=0 name="rollover"></a>
No comments:
Post a Comment