Displaying code from Chapter Seven, page
205
============= The Source Code Follows =============
<html>
<head>
<style>
.SWITCH {
font-family: verdana, helvetica, sans-serif;
color: navy;
background-color: yellow;
font-size: 36pt;
}
.OVER {
font-family: verdana, helvetica, sans-serif;
color: yellow;
background-color: navy;
font-size: 40pt;
}
</style>
<script language="javascript">
function Highlight(id) {
document.getElementById("menua").style.visibility = "hidden";
document.getElementById("menu" + id + "b").style.visibility = "visible";
}
function UnHighlight(id) {
document.getElementById("menu" + id + "b").style.visibility = "hidden";
document.getElementById("menua").style.visibility = "visible";
}
</script>
</head>
<body>
<div id="menua" style="top: 5; left: 5;
visibility: visible; position: absolute; z-index: 5;">
<p class="SWITCH">
<a href="#"
onMouseOver="Highlight(0)"
onMouseOut="UnHighlight(0)">One</a>
<a href="#"
onMouseOver="Highlight(1)"
onMouseOut="UnHighlight(1)">Two</a>
<a href="#"
onMouseOver="Highlight(2)"
onMouseOut="UnHighlight(2)">Three</a>
</div>
<div id="menu0b" style="top: 5; left: 5;
visibility: hidden; position: absolute; z-index: 5;">
<p class="SWITCH">
<a href="#"><span class="OVER">One</span></a>
<a href="#">Two</a>
<a href="#">Three</a>
</div>
<div id="menu1b" style="top: 5; left: 5;
visibility: hidden; position: absolute; z-index: 5;">
<p class="SWITCH">
<a href="#">One</a>
<a href="#"><span class="OVER">Two</span></a>
<a href="#">Three</a>
</div>
<div id="menu2b" style="top: 5; left: 5;
visibility: hidden; position: absolute; z-index: 5">
<p class="SWITCH">
<a href="#">One</a>
<a href="#">Two</a>
<a href="#"><span class="OVER">Three</span></a>
</div>
</body>
</html>
============= © Chris Bates === Created on Monday, 22nd March, at 21:23 =============