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.

Copyright 1997-2002 Idocs Inc. Content in this guide is offered freely to the public under the terms of the Open Content License and the Open Publication License . Contents may be redistributed or republished freely under these terms so long as credit to the original creator and contributors is maintained.

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

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