You can create a JavaScript that will allow you to change what images you display. When the web page is loaded, the original image will be displayed. When you place your cursor over the image, a second image will be displayed instead of the first one. When you move the cursor away from the image, a third image can be displayed.

Begin by creating an image link. The image "image1.gif" will be displayed when the webpage is loaded. You must also give the image a name, so that the browser knows which image you want to replace. To name the image, use the name attribute.

Now you will use the event handlers onMouseout and onMouseover to tell the browser what it should do when the cursor is over the image and when the cursor is not over the image.

You will use document.image.src="image2.gif" to specify what image you want to replace the original with. In this example, the name image specifies which image you want to replace. If you name your image something different, you will also need to change the name here.

This piece of code tells the browser to display image1.gif when the web page is loaded. When the cursor is placed over the image, image2.gif will be displayed. When the cursor is moved off of the image, image1.gif will be displayed (this is the same as the first image, but you could display a third image if you wanted to).

Here is the code for the example: