<style type="text/css">
.Item {
   cursor: hand;
   font-family: verdana; 
   font-size: 20;
   font-style: normal;
   background-color: navy;
   color: white
 }
.Highlight {
   cursor: hand; 
   font-family: verdana;
   font-size: 20;
   font-style: italic;
   background-color: red;
   color: blue
 }
</style></head>
<body>
<center><h1>DHTML Rollovers</h1></center>
<div align="center" id="Rollover">
<span class=Item>Milk</span>
<span class=Item>Eggs</span>
<span class=Item>Ham</span>
<span class=Item>Cheese</span>
<span class=Item>Pasta</span>
<span class=Item>Chicken</span>
</div>
<script language="JavaScript">
<!--
function rollon() {
  if (window.event.srcElement.className == "Item") {
     window.event.srcElement.className = "Highlight";
  }
}

Rollover.onmouseover = rollon;

function rolloff() {
  if (window.event.srcElement.className == "Highlight") {
     window.event.srcElement.className = "Item";
  }
}

Rollover.onmouseout = rolloff;
//-->
</script>
<p>The demonstration menu bar above is produced solely by a style sheet in the HEAD section, plus HTML, and uses a JavaScript to switch styles when the mouse is passed over the items in the menu. There is no need for graphics at all. Unfortunately it only works with Internet Explorer 4 and later, so it is not of much use at present.</p>
<p><i>Note:</i> If you use this script, make sure it is placed after the items in the menu, not in the HEAD of the document.</p>
