Many Links, One Rollover: The Links

In the previous two pages we've pasted into the document a script for creating a many-link-one-image rollover, and we've created the <IMG ...> tag for the rollover. Now we create the links which trigger the rollover. Create a set of links which look like this:

<A HREF="sfinfo.html"    onMouseOver="swap(this,'showperson','starflower')">Starflower</A><BR>
<A HREF="alleninfo.html" onMouseOver="swap(this,'showperson','allen')">Allen</A><BR>
<A HREF="jimmyinfo.html" onMouseOver="swap(this,'showperson','jimmy')">Jimmy</A><BR>
<A HREF="paulinfo.html"  onMouseOver="swap(this,'showperson','paul')">Paul</A><BR>
<A HREF="mikoinfo.html"  onMouseOver="swap(this,'showperson','miko')">Miko</A>

For the most part the links are normal links. Each link has an HREF attribute, content, and an end tag. To each link we've added an onMouseOver attribute. onMouseOver calls the swap function. swap takes three parameters. The first parameter is always this. Be sure not to put any quotes around this. The second is the name we gave the image in the <IMG ...> tag, 'showperson' in this example. Be sure to surround the image name with single quotes ('). Finally, we give the nickname of the image that should be displayed. We use the nicknames which were created in the <IMG ...> tag: 'starflower', 'allen', etc. Again, be sure to surround the nickname with single quotes.

Now we're ready. Put it all together and you get this image and set of links:

Starflower
Allen
Jimmy
Paul
Miko

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.