[Guide]Change Image on Mouseover Javascript

xXxExosoulerxXx · February 7, 2009

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.

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"> <!-- http://l2justice.servegame.com 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://l2justice.servegame.com" 
onMouseOver="document.rollover.src=image2.src" onMouseOut="document.rollover.src=image1.src"> 
<img src="images/rollover1.jpg" border=0 name="rollover"></a>

That's it. Good luck.

Enable^^ · April 17, 2009

Man i not undestend its for my site ???

[Guide]Change Image on Mouseover Javascript

Recommended Posts

xXxExosoulerxXx

Enable^^

Create an account or sign in to comment

Create an account

Sign in

Posts

Topics

Browse

Activity

Store