Starflower Allen Jimmy Paul Miko Each of these links changes the image when the mouse is over the link

Many Links, One Rollover: The <IMG ...> Tag

To set the image for doing many-link-one-image rollovers, we add one attribute to the <IMG ...> tag: NAME. After the tag we add a short script which loads the images used for the rollover. For example, this code configures the image for using five different images:

<IMG 
 SRC="imagedefault.gif"
 WIDTH=100 HEIGHT=100 ALT="Many Links, One Rollover"
 NAME="showperson"
 >
<SCRIPT TYPE="text/javascript">
<!--
setswap("showperson",
 'starflower', 'starflower2.gif',
 'allen', 'allen.gif',
 'jimmy', 'jimmy.gif',
 'paul', 'paul.gif',
 'miko', 'miko2.gif'
 );
//-->
</SCRIPT>

The first part of the tag is pretty normal: it sets the SRC, HEIGHT, WIDTH, and ALT attributes. The picture named in the SRC attribute is what will be displayed when the mouse is not over any link. After that we have a NAME attribute: NAME="showperson". The image must have a name so that we can refer to it in the link tags.

After the <IMG ...> tag we have a short script which loads the other images which are used in the rollover. The script has only one command, setswap(). The parameters for setswap() consist of a two-column list of images. Two pieces of information are passed for each image. In the first column is a nickname for the image. The second column has the source for the picture. This list can be as long as you like. Be sure that there is a comma after every nickname and after every source except for the last source in the list. Also, don't forget to put a closing paren after the list.

Now we create the links which trigger the rollover.

Many Links, One Rollover: The Links >>>