Creating Rollovers

Here I am going to explain how to create a simple image rollover using the HTML Editor.

1. Create 2 images of identical size
These can be for your navigation buttons, or just purely to create effect as a design detail.
2. Remember that one will replace the other when the cursor passes over them.
3. Save them to the same folder in which you will be saving the web page with the rollover effect.
4. Look carefully at the source code in the following page where I have prepared an example rollover. Do feel free to copy the code and adapt it to your own image names and/or linked pages. This image button also has a link to a second page to demonstrate how you could use these rollovers for navigation buttons on your web site.
5. It is very important to remember that if you want several rollover images on one page every one of them must have a unique name otherwise the rollover script will be confused!!
6. For more than one image, you would be wise to use consecutive numbers for the buttons in the code - so this one example of a navigation button has been called button1 either blue or red (any name will do), but for extra images I would have had to call them button2 or button3 etc.
Even if you have several rollovers on one page, the consecutive numbering in no way affects the actual positioning on your page of the rollovers.