Overview

This example demonstrates layering, a tabbed index, a changed cursor, setting up and capturing keypress and tab events, and changing views using the innerHTML method.

This TabIndex structure can be built with the code shown in the

• Style Section setting up the Keyboard shortcut appearance and the hand cursor.
• Javascript Section setting the Keyboard event capture function and the display function.
• HTML Section containing the Divisions containing the information for each display.
• Closing Javascript Section hiding the information sections.

The Style Section is self-explanitory. The Javascript function checkKey creates a click event when the Return key is pressed. The disp function receives the event value and the division id. After setting the Tab Index values to Black and the current Index value to Red, this function sets the display division to the HTML code found in the received division id.

The first part of the code in the HTML code sets up the Tab Indexes. Each index has an id value, a tabindex value greater than 0 to place it higher in the browser's hierarchy. The accesskey defines the tab location and the keypress to capture. When tabbed to or the appropriate key pressed while also pressing the alt key and pressing the return key to switch sections to view. The disp function is called when clicked. The last part of this HTML code contains the display division.

Following the display division are the section divisions. This is then followed by the javascript code to hide these section divisions.

Code the Style Section

<style> .key {text-decoration: underline} #demo {cursor:hand} </style>

Code the Javascript Section

<script language="javascript"> var left; var top; function checkKey(el) { if (event.keyCode==13) el.click() } function disp(el,d) { document.getElementById("1").style.color="black"; document.getElementById("2").style.color="black"; document.getElementById("3").style.color="black"; el.style.color="red"; document.getElementById("display").innerHTML = document.getElementById(d).innerHTML; } </script>

Code the HTML Section

<table align="center"><tr> <td><span id="1" accesskey=S tabindex=1 onkeypress="checkKey(this)" onClick="disp(this,'style')"> <span class="key">S</span>tyle Section</span> </td><td> <span id="2" accesskey=J tabindex=1 onkeypress="checkKey(this)" onClick="disp(this,'javascript')"> <span class="key">J</span>avascript Section</span> </td><td> <span id="3" accesskey=H tabindex=1 onkeypress="checkKey(this)" onClick="disp(this,'html')"> <span class="key">H</span>TML Section</span> </td></tr> <tr valign="top"><td colspan=3><div id="display"></div> </td></tr> </table> <div id="style" style="position:absolute;top:0;left:0;visibility:hidden"> Style stuff...</div> <div id="javascript" style="position:absolute;top:0;left:0;visibility:hidden"> Javascript stuff...</div> <div id="html" style="position:absolute;top:0;left:0;visibility:hidden"> Html stuff...</div>

<script language="javascript"> document.getElementById("overview").style.visibility = "hidden"; document.getElementById("display").innerHTML = document.getElementById("overview").innerHTML; document.getElementById("0").style.color="red"; document.getElementById("style").style.visibility = "hidden"; document.getElementById("javascript").style.visibility = "hidden"; document.getElementById("html").style.visibility = "hidden"; document.getElementById("hidden").style.visibility = "hidden"; </script>