logo

Change Image On Mouseover
Image Mouseover JavascriptChange one image to a different image on mouseover. Great webpage javascript effect.

Google
Web Search Hypergurl.com



Handy Tip : This javascript code can add a flair to webpages and there is so many uses where it can applied.


Bookmark This Page | Click here for more javascripts

Change Image on Mouseover Javascript

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

 

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.)

 

That's it. Good luck.

 
 
Hypergurl Hosting
IMPROVED PLANS
FREE Domain Name
web hosting and domain registration

 
Hosting Log In
Username:
Password: Sign up

 

NEW!
Blog for Webmasters

web site design feed Website Design

 
Refer A Friend
Your Email
Your Name
Friends Email
Friends Name




Home
Site Map
Email Hypergurl
About
Link To Hypergurl

Site design copyright 2001 - 2006 © hypergurl.com