All images in an HTML page are discrete, JavaScript addressable objects. The 'SRC' (source) of an image object can be altered to point at another image source.
By using JavaScript's awareness of the mouse entering, clicking on, or leaving a hyperlink (notice how the arrow cursor changes) you can perform fancy multimedia-style rollovers. You must define the HEIGHT and WIDTH of your image and you must NAME it, so you can refer to it simply in JavaScript.
<![CDATA[
<A HREF="ouch.html"
onMouseOver="myButton.src='light-on.gif';"
onmouseout="myButton.src='light-off.gif';">
<IMG SRC="light-off.gif"
NAME="myButton"
WIDTH="84"
HEIGHT="112"
BORDER="0">
</A>
]]>
This example is also a button, hence the <A HREF> tag and the BUTTON="0" element in the <IMG> tag. To make a simple rollover without any navigation feature just use the <IMG> tag and ignore the BUTTON element.
Note that this rollover technique does not pre-cache the images, so the first time it is used the images may take a moment to change as the new image is downloaded.
<![CDATA[
<a href="yourLinkHere.html"
onMouseOver="name1.src = 'on1.gif';"
onMouseOut="name1.src = 'off1.gif';">
<img name="name1"
src="off1.gif"
width="120"
height="25"
border="0">
</a>
<a href="yourLinkHere.html"
onMouseOver="name2.src = 'on2.gif';"
onMouseOut="name2.src = 'off2.gif';">
<img name="name2"
src="off2.gif"
width="120"
height="25"
border="0">
</a>
]]>
Also note: You can only exchange images of the same size.
It is also possible for a rollover on one image to affect another image on the screen.
<![CDATA[
<a href="yourLinkHere.html"
onMouseOver="name4.src = 'on2.gif';"
onMouseOut="name4.src = 'off2.gif';">
<img name="name3"
src="off1.gif"
width="120"
height="25"
border="0">
</a>
<a href="yourLinkHere.html"
onMouseOver="name3.src = 'on1.gif';"
onMouseOut="name3.src = 'off1.gif';">
<img name="name4"
src="off2.gif"
width="120"
height="25"
border="0">
</a>
]]>