Most pages that you go to on the web have some image swapping going on. When you place your mouse cursor over a menu option the picture may change colors and you may get a different message in the status bar in the lower left hand part of your window. You can accomplish this by using the 'onMouseOver' and 'onMouseOut' commands.

The way this image "Rollover" works is that you start with an image on the screen. When you MouseOver the image we have the image in that spot becomes something else so it looks like it is highlighted.

Put your mouse over the Image below

Below is the code for two menu items that have image swapping going on.

<a href = "lesson4.html" onMouseOver ="document.mainpic.src ='test2.jpg'" onMouseOut ="document.mainpic.src='test1.jpg'"> <img src = "test1.jpg" name = mainpic border = 0></a>

Document is the standard name for the window that you are on. In the img src tag we are naming our image. This way we can say document.mainpic.src is now equal to whatever picture we want to change it to. Mainpic and mainpic2 are names we chose ourselves. Document and src are reserved HTML words.

Change one of your programs so that all of the menu items use this rollover affect. You can either have a menu with graphical icons that change when you mouseOver them or have a picture that should change when you mouseOver it. The pictures being swapped should be the same size.