Cross-browser text-rollover events

The task for this unit is to show a web-page which demonstrates cross-browser text-rollover "events". There are hundreds of web sites which give tutorials, one of the best being Web Monkey's. However, many of them went into lots of detail too long to reproduce here, or involved complex images. To fully understand DHTML one must do those tutorials, but to show a simple text-rollover I instead went to yasd.com's site because it is short and to the point.

First, the writer of this article created the function scripting: 

<SCRIPT language="javascript">
<!--
function SetObjVisibility (obj, visi) {
   if (navigator.appName == "Microsoft Internet Explorer")
        eval(obj + ".style.visibility='" + visi + "'");
   else
        eval("document." + obj + ".visibility='" + visi + "'");
}

function switch_state(first, second) {
   SetObjVisibility(first,"hidden");
   SetObjVisibility(second,"inherit");
}

//-->
</SCRIPT>

Then the writer created a style sheet to set the parameters of the items. 

<STYLE type="text/css">
	BODY { background-color: white }
	DIV { position: absolute }
      .highlight { text-decoration: none; font-size: 12pt; font-family:
			Arial; font-weight: bold; color: green }
      .normal { text-decoration: none; font-size: 10pt; color: black }
</STYLE>

This is what the writer says next:

I create two menu items and each item's associated highlighted text. As Navigator does not currently generate mouse events that can be captured on general DIV blocks, at least general DIV blocks, I enclose the text within links ("A"), and assign the styles to the A tags: 

<BODY>

<!-- menu item one -->
<DIV id="one" style="postion:absolute; left: 150; top: 150">
<a href="" class="normal" onclick="return false" onmouseover="switch_state('one','oneb')">
Menu Item One
</a>
</DIV>
<DIV id="oneb" style="postion:absolute; left: 150; top: 150; visibility:hidden">
<a href="" class="highlight" onclick="return false" onmouseout="switch_state('oneb','one')">
Menu Item One
</a>
</DIV>

<!-- menu item two -->
<DIV id="two" style="postion:absolute; left: 150; top: 180">
<a href="" class="normal" onclick="return false" onmouseover="switch_state('two','twob')">
Menu Item Two
</a>
</DIV>
<DIV id="twob" style="postion:absolute; left: 150; top: 180; visibility:hidden">
<a href="" class="highlight" onclick="return false" onmouseout="switch_state('twob','two')">
Menu Item Two
</a>
</DIV>

Notice that the onmouseover event is trapped and handled for the "normal" text, but the onmouseout event is handled for the highlighted text. Each event handler calls one function, switch_state, and passes to this function which object is hidden and which is shown. The order that the objects are passed is different based on which event and for which object.

Next, I created two functions, switch_state and SetObjectVisibility. If I had used the cross-browser objects (see the DHTML section for these), I wouldn't need the SetObjectVisibility function. The switch_state object does nothing more than hide and show the appropriate text block.

As is demonstrated in this article, the writer had to go to some lengths to make the code work in both IE and Navigator. This is how it looks.