imageswap

Image Swap

This will not work in e-mail----only on a webpage:

Using:

<<>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"><<>/a>

Both images should be about the same size.

The "image 2" will be displayed when the cursor is highlighting the image link (onMouseOver), and the "image 1" will be displayed when the cursor is moved off of the image (onMouseOut).

You can preload the 2nd image by putting this at the bottom of the page
<<>img src="url of image 2" width="1" height="1">

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"><<>/a>

Demo below:

The "image 2" will be displayed when the cursor is highlighting the image link (onMouseOver), and the "image 1" will be displayed when the cursor is moved off of the image (onMouseOut).

dead link here for demo purposes

And more mouseovers 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:

http://www.geocities.com/williamandx/sigfloyd2.html

(NOTE: The onmouseover images initially load fairly slowly, but once they have all loaded, the change-overs are usually quick.)



	Powered by WebTV