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:
