Topic Areas
Free Scripts
Information
Resources
Tutorials
Information
Search
Help Forums
Contact
Link to Us
Submit Script
Privacy Policy
More Resources
Free Stuff
Web Resources
Other Links
PageResource.com: Learn HTML
Just Free Stuff
JavaScript City
Image Rollover

Script Introduction

This script will create linked images which will change when the mouse passes over them. The script is set up for two image flips, but more can be added by editing the code.

Cut and Paste Code: HEAD Section
This code should be placed between the <head> and </head> tags.

Cut and Paste Code: BODY Section
This code should be placed between the <body> and </body> tags.

Installation Instructions

  1. Paste the HEAD Section code from above between the <head> and </head> tags on your page.
  2. Paste the BODY Section code from above between the <body> and </body> tags on your page, exactly where you want the images to appear.

  3. Find the matching lines below in the script and change the text in red to the width and height of the images (all images need to have the same width and height):

    // Set width and height of all images
    var img_width=100;
    var img_height=25;

  4. Find the matching lines below in the script and change the text in red to the URL of each image that will appear when the mouse moves over the image:

    // Set up "on" images (show up onmouseover)
    pic1on= new Image(img_width,img_height);
    pic1on.src="image1on.gif";
    pic2on= new Image(img_width,img_height);
    pic2on.src="image2on.gif";

  5. Find the matching lines below in the script and change the text in red to the URL of each image that will appear when the mouse moves off the image:

    // Set "off" images (onmouseout)
    pic1off= new Image(img_width,img_height);
    pic1off.src="image1.gif";
    pic2off= new Image(img_width,img_height);
    pic2off.src="image2.gif";

  6. Find the matching lines below in the script and change the text in red to reflect the link URL, the default image's URL, width, height, and the alt text for the image:

    <p>
    <a href="page1.html" onMouseover="changeImage('pic1',pic1on)" onMouseout="changeImage('pic1',pic1off)"><img src="image1.gif" name="pic1" id="pic1" width="100" height="25" border="0" alt="image"></img></a>
    </p>
    <p>
    <a href="page2.html" onMouseover="changeImage('pic2',pic2on)" onMouseout="changeImage('pic2',pic2off)"><img src="image2.gif" name="pic2" id="pic2" width="100" height="25" border="0" alt="image"></img></a>
    </p>

  7. Check the Format Window to be sure you do not have one single line of code, or too many line breaks in the code.

  8. If you want to add more images, you can do so by adding code in the proper places. For instance, if you want to add a third image, add the lines in green below to the HEAD section (change the red text for image URLs):

    // Set up "on" images (show up onmouseover)
    pic1on= new Image(img_width,img_height);
    pic1on.src="image1on.gif";
    pic2on= new Image(img_width,img_height);
    pic2on.src="image2on.gif";
    pic3on= new Image(img_width,img_height);
    pic3on.src="image3on.gif";

    // Set "off" images (onmouseout)
    pic1off= new Image(img_width,img_height);
    pic1off.src="image1.gif";
    pic2off= new Image(img_width,img_height);
    pic2off.src="image2.gif";
    pic3off= new Image(img_width,img_height);
    pic3off.src="image3.gif";

    In the BODY section, you will need to add the third image (note how the image is named and how the function is called onMouseover and onMouseout):

    <p>
    <a href="page3.html" onMouseover="changeImage('pic3',pic3on)" onMouseout="changeImage('pic3',pic3off)"><img src="image3.gif" name="pic3" id="pic3" width="100" height="25" border="0" alt="image"></img></a>
    </p>

Example

A working sample of the script is shown below. Move the mouse over the images to test the script.

image

image

JavaScript Book
JavaScript: A Beginner's Guide
by John Pollock
What's New
Simple Searchbox script added.
More...
Web Xpertz
Find more JavaScript tools and resources at WebXpertz City! Click one of the links above to browse the various attractions within the city.