How do you ... hover here to image swap there?
This is almost the exact same as a normal javascript image swap. The only difference of this technique is the image swap will happen to a different part of the page instead of in the same spot. For this example, we will use these two example images.

one two

The first image will be placed on the page with a NAME assigned to it.

<img src="image1.gif" name="MyImage">

This image can now be accessed by javascript as document.MyImage. Of course add in the width, height, alt, and border properties as desired too.

The next part is to create a link that will affect that image.

<a href="" onMouseOver="document.MyImage.src='image2.gif';" onMouseOut="document.MyImage.src='image1.gif';">

This is linked text


<img src="image1.gif" name="MyImage">

This is linked text example

SRC is the SouRCe of the image file.

document.MyImage.src specifies that something is happening to the src of the object named MyImage on this document (web page). Remember... JavaScript is a step language. It goes level by level to find and use something.

OnMouseOver and OnMouseOut are self explanitory. They will do this specified coding when this event happens. For the example, They are being used to specify a new src for the named image.

If you have more than one rollover on the same web page, you MUST use a different name value for each one. Using the same name value for two or more will confuse the browser and no effect will be seen.

Try to use two images of the same dimensions for best results.
How do you ... hover here to image swap there?

Advertise in the banner along the top, Click here!

Valid XHTML 1.0 Transitional Valid CSS! Text Link Ads