Using Tables and DHTML for Menus

Dynamic HTML can be used inventively in many ways. Here's a simple way in which tables and DHTML can be used together to provide a menu function. The technique may be used in a frameset, but to keep things simple, we are going to use the table to control 'targets' in an inline frame (or IFRAME).

Here's how the technique works from a user's viewpoint.

Google Yahoo ABC News BBC News DIY Investor

From the authoring point of view, the menu list (in this case, a list of external Web sites) is a table within a two cell table which also contains the IFRAME. In our menu list table, each TR tag has an onClick, an onMouseOver and an onMouseOut event, as follows:

• onmouseover="hw_onmouseover(this)"
• onmouseout="hw_onmouseout(this)"
• onclick="hw_onclick(this)"

The TR tag also has a "dummy" attribute of active, with an initial value of false. So the whole tag looks like:

<tr onmouseover="hw_onmouseover(this)" onmouseout="hw_onmouseout(this)" onclick="hw_onclick(this)" active="false">

The JavaScript functions are as follows:

<SCRIPT LANGUAGE="JavaScript"> function hw_onmouseover(element) { var oTR = getElement(element, "TR"); if (oTR != null && !eval(oTR.active)) { oTR.style.backgroundColor = "silver"; } } function hw_onmouseout(element) { var oTR = getElement(element, "TR"); if (oTR != null && !eval(oTR.active)) { oTR.style.backgroundColor= ""; } } function hw_onclick(element) { var oTR = getElement(element, "TR"); var oTABLE = getElement(oTR,"TABLE"); if (oTABLE != null) { if(typeof(oTABLE.activeRow) != "undefined" && oTABLE.activeRow != null) { oTABLE.activeRow.style.backgroundColor = ""; oTABLE.activeRow.style.color = ""; oTABLE.activeRow.active = "false"; } if (oTR != null) { oTR.style.backgroundColor = "highlight"; oTR.style.color = "highlighttext"; oTR.active = "true"; oTABLE.activeRow= oTR; } } } function getElement(src, tagName) { var obj = src; while (obj != null && obj.tagName!= tagName) { obj =obj.parentElement; } return obj; } </SCRIPT>

The effect of the routines is to provide the user with selection feedback. When a selection is made, the selection is highlighted.

With some imagination, this basic effect can be used in a number of situations. Good luck finding the appropriate situation!