<HTML> <HEAD> <TITLE>Rollover Effects</TITLE> <META NAME="FILENAME" CONTENT="rollover_JS.HTM"> <STYLE> .Item { cursor: hand; font-family: verdana; font-size: 20; font-style: normal; background-color: blue; color: white } .Highlight { cursor: hand; font-family: verdana; font-size: 20; font-style: italic; background-color: white; color: blue } A:link { color:#003399; text-decoration:none; } A:visited { color:#6699CC; text-decoration:none; } A:hover { text-decoration:underline; } </STYLE> </HEAD> <BODY TOPMARGIN=20 LEFTMARGIN=40 bgcolor="#ffffff" LINK="#000066" VLINK="#666666" TEXT="#000000"> <!--TOOLBAR_START--> <!--TOOLBAR_EXEMPT--> <!--TOOLBAR_END--> <H2><BR> <FONT FACE="verdana,arial,helvetica" SIZE=2><B>Move the cursor over any of the seven elements to change their style.</B></FONT> </H2> <DIV id=Rollover> <P> <SPAN class=Item>Milk</SPAN> <SPAN class=Item>Cookies</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></P> </DIV> <P> <FONT FACE="verdana,arial,helvetica" SIZE=2> In this example, we have seven SPAN elements, initially set to use the class Item. When the mouse moves over any one of those elements, it will be changed to use the class Highlight. Innovations in Internet Explorer 4 and 5 enable the following: </FONT> <FONT FACE="verdana,arial,helvetica" SIZE=2> <UL> <LI>Events can now be generated from a SPAN element. Previously, an HTML author would have had to wrap each SPAN in an anchor to get the right events.</LI> <LI>With event bubbling, events can be captured at the document level. You do not need to create separate event handlers for each element that will participate in the effect.</LI> </UL> </FONT> <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> <P> <P> </BODY> </HTML>