Hover Guide

Many pokemon sites use a html function known as Hover.
An example of a common use for hover, and what this guide will help you achieve on your site is my right menu. You can see a list of my top affiliates and my normal affiliates. If you hover over the names of each affiliate you will see their website button appear in the box above.
This is the most common use of hover on pokemon and other fan sites, as using it in this way saves space by allowing you to put a text link and still show the websites buttons.
This is what this guide aims to help you achieve on your website.

The hover function requires two main pieces of code:
1) A javascript code which holds the names of each button and the URL of each of these buttons.
2) The actual hover code that will allow the hover fuction to work, which contains the text links of all the affiliates.

Now here is the first piece of code, you must place this in the head of your html document (in between the and tags).
This example contains five buttons, you can add or remove buttons if you like.

<script language="JavaScript"><!-- if (document.images) { button00 = new Image button01 = new Image button02 = new Image button03 = new Image button04 = new Image button05 = new Image button00.src ="The url of the button you would like to appear when no links are 'hovered over' by the user" button01.src ="button url of first affiliate" button02.src ="button url of second affiliate" button03.src ="button url of third affiliate" button04.src ="button url of fourth affiliate" button05.src ="button url of fifth affiliate" }// --></script>

Here is the second piece of code, this code should be placed wherever you want the hover list to appear. Most websites put this in their right menu.
Remember to make sure the order of affiliates matchs the order you put your buttons in.

<img src="The url of the button you would like to appear when no link is 'hovered on' by the user" vspace="1" border="0" width="width of your buttons (standard buttons are 88)" height="height of your buttons (standard buttons are 31)" name="affiliates"><br><br> <a class="nav" onmouseover="document.affiliates.src=button01.src" onmouseout="document.affiliates.src=button00.src" target="_blank" href="First affiliate url">First affiliate name(this is what the link will say)</a><br> <a class="nav" onmouseover="document.affiliates.src=button02.src" onmouseout="document.affiliates.src=button00.src" target="_blank" href="Second affiliate url">Second affiliate name(this is what the link will say)</a><br> <a class="nav" onmouseover="document.affiliates.src=button03.src" onmouseout="document.affiliates.src=button00.src" target="_blank" href="Third affiliate url">Third affiliate name(this is what the link will say)</a><br> <a class="nav" onmouseover="document.affiliates.src=button04.src" onmouseout="document.affiliates.src=button00.src" target="_blank" href="Fourth affiliate url">Fourth affiliate name(this is what the link will say)</a><br> <a class="nav" onmouseover="document.affiliates.src=button05.src" onmouseout="document.affiliates.src=button00.src" target="_blank" href="Fifth affiliate url">Fifth affiliate name(this is what the link will say)</a><br>

Thats it!
You should now have a working hover affiliate list.
If you have any problems with this code please contact me and I will do my best to help out.


This guide only shows how to make a hover list for affiliates, however the hover function can be used in several ways, so if you want to use the hover function in another way, feel free to contact me, and I will do my best to help you.