Adding text below the rollover menu
Let's see how this was done using the "west view." (The others follow the same pattern).
The first version of the Central Office example used a standard text link to load westview.htm into the "main" frame:
<![CDATA[
<A HREF="westview.htm" target="main">West View</a>
]]>
We could have substituted a button that said "West View" on it in the above example
<![CDATA[
<A HREF="westview.htm" target="main"><img src="westviewbutton.gif"></a>
]]>
But we went further and added two images, a starting image and a second one that is displayed when the mouse is over the button. Note that the img tag now has a name attribute, which allows us to refer to it in the JavaScript statements. When the mouse moves over the image, the value of the status attribute of the window object is changed and the value of the src attribute of the image called m1 is changed:
<![CDATA[
<A HREF="westview.htm"
onMouseOver =
"document.m1.src ='images/option1-on.gif';
window.status='View of a central office from the West';
return true;"
onMouseOut =
"document.m1.src = 'images/option1-off.gif';
window.status='';
return true;"
target="main">
<img src = "images/option1-off.gif" name = "m1" width= "130" height= "33" border = "0" ></a>
]]>
In the final version, we not only swap the button images, we swap the explanation images in the area below the buttons. The image below the buttons has the name rolloverimage:
<![CDATA[
<A HREF="westview.htm"
onMouseOver =
"document.m1.src ='images/option1-on.gif';
document.rolloverimage.src = 'images/option1.gif';
window.status='View of a central office from the West';
return true;"
onMouseOut =
"document.m1.src = 'images/option1-off.gif';
document.rolloverimage.src = 'images/no.gif';
window.status='';
return true;"
target="main">
<img src = "images/option1-off.gif" name = "m1" width= "130" height= "33" border = "0" ></a>
<img src = "images/no.gif" name = "rolloverimage" width=130 height=60 alt="" border="0">
]]>
(The the Rolloverimage image is below the West, East and Introduction menu images)