Hover link to refresh image

This tutorial will help you refresh an image everytime you use your mouse to hover over a link.

First, add this to your head tags.

Code:

<script language="javascript">
<!--
button00 = new Image
button01 = new Image
button02 = new Image
button03 = new Image

button00.src="http://www.iwebbuddy.com/users/2613/16/40/39/album/th/nopic10.png"
button01.src="http://i35.tinypic.com/sfiek7.png"
button02.src="http://i34.tinypic.com/o7vqrn.gif"
button03.src="http://www.iwebbuddy.com/users/2613/16/40/39/album/th/search10.png"
-->
</script>


You can replace the image links with your picture links,

Next, add this for the content ( not in your head tags ) :

Code:


<img src="http://" name="button">  <br> <br>

<a onmouseover="document.button.src=button01.src" onmouseout="document.button.src=button00.src"
href="http://www.iwebbuddy.com/"><small>iWebBuddy.com Number 1</small></a>

<br> <br>

<a onmouseover="document.button.src=button02.src" onmouseout="document.button.src=button00.src"
href="http://www.iwebbuddy.com/"><small>iWebBuddy.com Number 2</small></a>

<br> <br>

<a onmouseover="document.button.src=button03.src" onmouseout="document.button.src=button00.src"
href="http://www.iwebbuddy.com/"><small>iWebBuddy.com Number 3</small></a>

You can replace the links and text that will be used for hovering from the above code box.

Preview Example :
This is a web page you can use to view this tutorial in action,

>> Click Here To Preview The Example