Hover Affiliation Links
Have you ever seen a site (like this one :P) that has an image that says "Hover" that changes to an affiliate button whenever you roll over an affiliate's link? Take a look at the navigation bar on the right. See, under the Affiliates header, there's an image that says: Hover. Well, roll your mouse over one of our affiliates, and that image will change to the button of the affiliate you rolled over! This guide explains how to do that.
First, you will need to copy and paste the following JavaScript code into your <head>.
<script language="JavaScript" type="text/javascript">
<!--
if (document.images) {
button001 = new Image
button00 = new Image
button01 = new Image
button02 = new Image
button03 = new Image
button001.src ="http://www.example.com/hoverbutton.png"
/* this is the URL of the image you want displayed when a visitor does not have his/her mouse over an affiliate link (this is the hover button) */
button00.src ="http://www.exampleaffy.com/affybutton.png"
button01.src ="http://www.exampleaffy.com/affybutton.png"
button02.src ="http://www.exampleaffy.com/affybutton.png"
button03.src ="http://www.exampleaffy.com/affybutton.png"
}// --></script>
Replace all of the example image URLs with your own, and whenever you get a new affiliate just follow the pattern. Add button04 = new Image to the top part and button04.src ="URL OF AFFY BUTTON HERE" to the bottom part. Remember to include the http:// prefix.
That's all for stuff inside the head of your source code, but now we need to get it onto your page.
Insert the following code where you want the hover button to be.
<img src="http://www.example.com/hoverbutton.png" vspace="1" border="0" width="88" height="31">
Replace the example URL with the location of your hover button.
Now, for every link that is an affiliate, instead of typing a standard link in HTML, type this:
<a onmouseover="document.affiliates.src=button00.src" onmouseout="document.affiliates.src=button001.src" target="_blank" href="http://www.exampleaffy.com/">Example Affy Name</a>
IMPORTANT: Where it says document.affiliates.src=button00.src, change the number of the button to the number of the affiliate button that you defined before in the head with javascript. For example, if The Spriting Shack was one of your affiliates, then in the head it would say:
buttonXX = new Image
buttonXX.src ="http://www.example.com/tssaffybutton.png"
Replacing XX with any number.
I hope this guide helped! If you have any questions or suggestions, please contact me.
| 
