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

First, add this to your head tags.

<script language="javascript"> <!-- button00 = new Image button01 = new Image button02 = new Image button03 = new Image button00.src="http://i35.tinypic.com/2qwh9n7.png" button01.src="http://i35.tinypic.com/sfiek7.png" button02.src="http://i34.tinypic.com/o7vqrn.gif" button03.src="http://i37.tinypic.com/28r3140.png" --> </script>

You can replace the image links with your picture links.

Next, add this for the content between the opening and closing body tags of your web page :

<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.