JavaScript: Simple Mouse Over

Using JavaScript MouseOver, one image is exchanged for another when the mouse moves over it. It is important that the images be the same size when using MouseOver.

Here is an example:

I have created 2 images that will be used in the rollover. The green version will be displayed when the mouse "rolls over" the image. The blue version will be displayed when the mouse is not on the image.

 
Here is my goal:
Go to Publications
Here's how I did it:
  1. Create the images. Make sure the "on" and "off" image are the same size.
  2. Place this code given below on the page where you want the rollover image displayed. Notice there are 2 parts to the code. An <A HREF...> tag that contains the link to the file you want the user to go to, an "onMouseOver" attribute that states the gif to be displayed when the mouse moves over the image and an "OnMouseOut" attribute that determines which gif will be displayed when the mouse if moved off of the file. The second part of the code is an IMG SRC tag that determines which image file will be initially displayed on the page. A "name" is part of the MouseOver, MouseOut attributes and the IMG tag. The name relates the gif in the IMG tag and the MouseOver and MouseOut images.
    3. <A HREF="filename.html" 

    onMouseOver="name.src='on_image.gif';"

    onMouseOut="name.src=off_image.gif';">

<IMG SRC="off_image.gif" 

    NAME="name" Alt="Go to Publications" 

    BORDER=0></A>
    Where:
    filename.html is the page you want the user to go to when the click the mouse
    name is a short name that matches the on, off, and initial image displayed.
    on_image.gif is the image that will be displayed when the mouse is moved over the image
    off_image.gif is the image that will be displayed when the mouse if moved off of the image AND, in this case, the image that will be initially displayed as part of the IMG SRC tag
Here is the exact coding that I used to display the blue/green Go! MouseOver: 
<A HREF="js4.html"

    onMouseOver="pubs.src='go_green.gif';"

    onMouseOut="pubs.src='go_blue.gif';">

<IMG SRC="go_blue.gif" NAME="pubs" Alt="Go to Publications" 

    BORDER=0></A><br>
Note that I could have added a third image to the MouseOver. I could use one image for the initial display, one for "MouseOn" and one for "MouseOff". Once the mouse had gone over the image, the initial image would not display until the page was reloaded. Here's an example using and orange Go! as the initial image (IMG SRC tag).
Go to Publications
And the code: 
<A HREF="js4.html" onMouseOver="pubs2.src='go_green.gif';"

   onMouseOut="pubs2.src='go_blue.gif';">

<IMG SRC="go_orange.gif" NAME="pubs2" 

   Alt="Go to Publications"

   BORDER=0></A><br>

Assignment:
Use Microsoft PhotoEditor or other image editing program to create two images that are the same size but differ in some grapical way.  Create a web page that changes between the two images when the mouse/pointer is passed over the image region.

Submit the source code for the HTML and a copy of the page in printed form.


JavaScript 5: Form Verification

Copyright © 2000 E. Bell