Rollover1 - no JAVA required

*** make sure to read the "Rollover Problem" page, for a common rollover coding problem, and the fix.

4-state, works in IE and Netscape - 

requires index number for each rollover

But no image Preload - so make sure to add your own preload code.

This script, unlike others - is incredibly simple there is no Java Script code before the Body, which I have never seen before.  There are 4 possible states for every rollover  -  actually 3, since MouseOver is always the same image as MouseUp (click released). However, 90% of the JAVA Mouseovers only use 2 states and therefore have nothing for the MouseDown (Clicked) state !!

This is one of the few scripts available that honors all 4 rollover states.

Important !!  the indices must start with [0], and count upward by 1 for each rollover !!!  There is a requirement for each swap to be indexed with a number (see the code), and the numbers inside the brackets must go from 0, to 1, to 2, etc and must be in order.  If you start the sequence with [1] it will not work !!

The Script (no Java Script code necessary !!!)

If you have 3 Images - copy MouseOut.jpg to MouseUp.jpg and use this and edit the dimensions

<p align="center">

<A HREF = "#"

onMouseOut = "document.images[0].src = 'mouseout.jpg';"

onMouseOver = "document.images[0].src = 'mouseover.jpg';"

onMouseDown = "document.images[0].src = 'mousedown.jpg';"

onMouseUp = "document.images[0].src = 'mouseup.jpg';">

<img border=0 src="mouseout.jpg" align="center" width="100" height="62">

</A>

 

If you Have 2 Images - use this and edit the dimensions

<p align="center">

<A HREF = "#"

onMouseOut = "document.images[1].src = 'button1.jpg';"

onMouseOver = "document.images[1].src = 'button2.jpg';"

onMouseDown = "document.images[1].src = 'button1.jpg';"

onMouseUp = "document.images[1].src = 'button2.jpg';">

<img border=0 src="button1.jpg" align="center" width="160" height="35">

</A>