My Image
My Image
<a href="http://progrower.coffeecup.com" onMouseOver="document.picture.src=image2.src" onMouseOut="document.picture.src=image1.src" >
<img name="picture" src="images/picture1.jpg" alt="My Image" />
</a>
Paste this code to the Body HTML of a HTML box
<script language="Javascript">
image1=new Image
image1.src="images/picture1.jpg"
image2=new Image
image2.src="images/picture2.jpg"
</script>
Paste this code to the Header HTML of the same HTML box above.
Make your images the same size and name them "picture1" and "picture2" and put them in a folder named "images".
Simple picture switch on mouseover with Java script with link
Back to Progrower.coffeecup.com
For multiple images on the same page you only need to alter the html a little.
<script language="Javascript">
image3=new Image
image3.src="images/picture3.jpg"
image4=new Image
image4.src="images/picture4.jpg"
</script>
<a href="http://progrower.coffeecup.com/" onMouseOver="document.pictureA.src=image4.src" onMouseOut="document.pictureA.src=image3.src" >
<img name="pictureA" src="images/picture3.jpg" alt="My Image" />
</a>