The image below will "swap" with another,
and it is clickable for an audio:

Source this page for the codes

An explanation of the codes is below .

Codes and demos for
onMouseOver and onMouseOut audios

Image Swap This will not work in e-mail----only on a webpage: <<>a href="url of whatever" onMouseOver='A.src="url of image 2"' onMouseOut='A.src="url of image 1"'> <<>img src="url of image 1" name="A"> Both images should be about the same size. You can preload the 2nd image by putting this at the bottom of the page <<>img src="url of image 2" width="0" height="0"> You can have as many of these on a webpage as you want, just use a different name. Such as, the next image swap will have name="B" and 'B.src in the code, instead of A: <<>a href="url of whatever" onMouseOver='B.src="url of image 2"' onMouseOut='B.src="url of image 1"'> <<>img src="url of image 1" name="B"> The "image 2" will be displayed when the cursor is highlighting it (onMouseOver), and the "image 1" will be displayed when the cursor is moved off of the image (onMouseOut). And more mouseover fun with images: The image will change when the text links are highlighted. <img src="url of image1" name="whatever"> <a href="url of image2 or ??" onMouseOver="whatever.src='url of image2'" onMouseOut="whatever.src='url of image1'">image 2</a> <a href="url of image3 or ??" onMouseOver="whatever.src='url of image3'" onMouseOut="whatever.src='url of image1'">image 3</a> <a href="url of image4 or ??" onMouseOver="whatever.src='url of image4'" onMouseOut="whatever.src='url of image1'">image 4</a> A demo of this is the Hurricane Floyd link below: http://www.geocities.com/williamandx/sigfloyd2.html (It takes time for all the photos to pre-load, so the initial viewing may be sluggish.)

Top of page