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.
Have a go.
Example available here:
www.venicedigital.com/forum-trials/rollover.html
Script as follows:
Put this script immediately before the </head> (or <head/>) tag
<SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT">
<!-- Hide script from old browsers
if (document.images) {
button1Red = new Image
button1Blue = new Image
button1Red.src = "that.jpg"
button1Blue.src = "this.jpg"
}
else {
button1Red = ""
button1Blue = ""
document.button1 = ""
}
// End hiding script from old browsers -->
</script>
For extra buttons or images, you will have to multiply the 4 different sections of the script by the number of buttons or images you are using.
eg.
button1Red = new Image
button1Blue = new Image
would become:
button1Red = new Image
button1Blue = new Image
button2Red = new Image
button2Blue = new Image
and so on.
Where you position your button/image somewhere between the <body></body> tags you would see:
<A HREF="return.html" onMouseover="document.button1.src=button1Red.src" onMouseout="document.button1.src=button1Blue.src"><IMG SRC="this.jpg" WIDTH="300" HEIGHT="100" BORDER="0" NAME="button1" ALT=""></A>
Where:
IMG SRC="this.jpg" WIDTH="300" HEIGHT="100" BORDER="0" NAME="button1" ALT="">
refers to your image name and size
And:
A HREF="return.html"
refers to the linked document your user will navigate to if he clicks on the linked rollover images.
