One Button Rollover Example
This is the listing of our one button example:
<![CDATA[
<HTML>
<HEAD>
<TITLE>Button rollover example</TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF" >
<A href="westview.htm"
onMouseOver =
"document.m1.src ='images/westOn.gif';
window.status='West View';
return true;"
onMouseOut =
"document.m1.src = 'images/westOff.gif';
window.status=''; return true;">
<IMG src = "images/westOff.gif" name = "m1" width="130" height="33" border="0"></a>
</BODY>
</HTML>
]]>
Note that the <A> and <IMG> tags follow their usual patterns, but there are new attributes. When the user positions the cursor over the <A> ... </A> tag, the value of the src attribute of the image named m1 is set to westOn.gif and when it is moved away, it is reset to westOff.gif. The name m1 is specified in the <IMG> tag. The status attribute of the window is also changed.
The pictures westOn and westOff.gif are shown below:
Note that they are similarly sized, and the word "West" is in exactly the same position within both boxes. If that were not the case, the words would jump when the pictures changed.
The box is displayed over a background with a black edge, which will appear to turn blue when westOn is displayed.
Be sure you understand this example thoroughly before you try to do the assignment.