You may or may not have seen image rollovers. Rollovers are effects that provide visual feedback to the reader when his or her mouse is over an item. Well, you can also create text rollovers. This cheap page trick shows just one technique that you can use to create a text rollover.
First, I create a page with two menu items. Each menu item consists of two different layers, created using DIV blocks. One set of layers contains the original menu text, and the “highlighted” text that shows when the reader’s mouse is over the text. I created a style sheet then that has a style setting for the “normal” text and one for the “highlighted” text:
<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>
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.
That’s it for this Cheap Page Trick. Try it out for yourself. What’s the cost for the trick? Less than 1K. Now, that’s Cheap!