DHTML Application Toolbars - DHTML Lab | 6

Logo

DHTML Application Toolbars
keyboard access


Reason 5 - Easy keyboard access

All elements considered as "controls" by Internet Explorer can be assigned the HTML ACCESSKEY attribute, in this way:

<TAGNAME ACCESSKEY=keystring>

The keystring value identifies the "accelerator key" for the element. Pressing Alt and the key either gives focus to the element or clicks it.

Elements that accept the ACCESSKEY attribute are:

A,     APPLET, BUTTON,  EMBED,  FIELDSET, IFRAME, IMG,
INPUT, LABEL,  LEGEND,  OBJECT, SELECT,   TABLE,  TEXTAREA

For example, if our page contained this HTML:

<BUTTON ACCESSKEY="s" onClick="stopIt()">Stop</BUTTON>

We could execute the stopIt() function by using Alt-S from our keyboard.

And we signal this ability to our users by underlining a letter, corresponding to the key, in the displayed text:

Try it:

  

The above toolbar was created with this HTML and script:


<HTML>
<HEAD>
<STYLE TYPE="text/css">
.but {
    border:1px buttonface solid;
    font-family:MS Sans Serif;font-size:8pt;
}
</STYLE>
.
.
.
</HEAD>
<BODY>
.
.
.
<DIV ID="toolbar" NOWRAP
   STYLE="width:20;background-color:buttonface;padding:2px;">
   <BUTTON CLASS=but ACCESSKEY="s">
      onClick="yourStopFunction()"<IMG
      SRC="StopOff.gif" WIDTH=19 HEIGHT=20 BORDER=0><BR>
      <U>S</U>top</BUTTON><BUTTON CLASS=but ACCESSKEY="r"
      onClick="yourRefreshFunction()"IMG
      SRC="RefreshOff.gif" WIDTH=17 HEIGHT=20 BORDER=0><BR>
      <U>R</U>efresh</BUTTON><BUTTON CLASS=but ACCESSKEY="h"
      onClick="yourHomeFunction()"IMG
      SRC="HomeOff.gif" WIDTH=19 HEIGHT=20 BORDER=0><BR>
      <U>H</U>ome</BUTTON><BUTTON CLASS=but ACCESSKEY="e"
      onClick="yourSearchFunction()"IMG
      SRC="SearchOff.gif" WIDTH=20 HEIGHT=20 BORDER=0><BR>
      S<U>e</U>arch</BUTTON><BUTTON CLASS=but ACCESSKEY="f"
      onClick="yourFavoritesFunction()"IMG
      SRC="FavoritesOff.gif" WIDTH=20 HEIGHT=20 BORDER=0><BR>
      <U>F</U>avorites</BUTTON><BUTTON CLASS=but ACCESSKEY="i"
      onClick="yourHistoryFunction()"IMG
      SRC="HistoryOff.gif" WIDTH=20 HEIGHT=20 BORDER=0><BR>
      H<U>i</U>story</BUTTON>
</DIV>
.
.
.
<SCRIPT LANGUAGE="JavaScript1.2" TYPE="text/javascript">
allBUTs = toolbar.children;
maxWidth = 0;
for (i=0;i<allBUTs.length;i++) {
    tSpan = allBUTs(i);
    tSpan.onselectstart = function(){return false}
    maxWidth = Math.max(maxWidth,tSpan.offsetWidth);
    tSpan.img = tSpan.children(0);
    tSpan.oversrc = tSpan.innerText + "On.gif";
    tSpan.outsrc = tSpan.innerText + "Off.gif";
    tSpan.onmouseover = function(){
        this.style.border = "1px buttonhighlight outset";
        this.img.src = this.oversrc;
	}
    tSpan.onmouseout = function(){
        this.style.border = "1px buttonface solid";
        this.img.src = this.outsrc;
    }
    tSpan.onmousedown = function(){
        this.style.border = "1px buttonhighlight inset";
    }
    tSpan.onmouseup = function(){
        this.style.border = "1px buttonhighlight outset";
        window.focus();
    }
}
for (i=0;i<allBUTTONs.length;i++) {
    tSpan = allBUTTONs(i);
    tSpan.style.pixelWidth = maxWidth;
}
</SCRIPT>>
</BODY>
</HTML>

Let's wrap up.


Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: Jan 25, 2000
Revised: Jan 25, 2000

URL: http://www.webreference.com/dhtml/column29/6.html