| home / experts / dhtml / column29 |
|
Instead of SPANs, we recommend using the BUTTON element for toolbar items, for many reasons.
With BUTTON, the desired one-pixel borders work fine, giving us a real Windows button look.
A true "pressed" button look involves not only an inset border but a slight offset of the complete element (right-down). The BUTTON element gives us this behavior by default.
A BUTTON has a default color of buttonface and the contained HTML is aligned in the center both horizontally and vertically.
Try it:
To create the above, BUTTON-based toolbar, we used 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"
STYLE="width:250;background-color:buttonface;
padding-top:1px;padding-left:2px;">
<BUTTON CLASS=but STYLE="width:32"
onClick="yourFileFunction()">File</BUTTON><BUTTON
CLASS=but STYLE="width:34"
onClick="yourEditFunction()">Edit</BUTTON><BUTTON
CLASS=but STYLE="width:39"
onClick="yourViewFunction()">View</BUTTON><BUTTON
CLASS=but STYLE="width:59"
onClick="yourFavoritesFunction()">Favorites</BUTTON><BUTTON
CLASS=but STYLE="width:42"
onClick="yourToolsFunction()">Tools</BUTTON><BUTTON
CLASS=but STYLE="width:36"
onClick="yourHelpFunction()">Help</BUTTON>
</DIV>
.
.
.
<SCRIPT LANGUAGE="JavaScript1.2" TYPE="text/javascript">
allBUTs = toolbar.children;
for (i=0;i<allBUTs.length;i++) {
tSpan = allBUTs(i);
tSpan.onselectstart = function(){return false}
tSpan.onmouseover = function(){
this.style.border = "1px buttonhighlight outset";
}
tSpan.onmouseout = function(){
this.style.border = "1px buttonface solid";
}
tSpan.onmousedown = function(){
this.style.border = "1px buttonhighlight inset";
}
tSpan.onmouseup = function(){
this.style.border = "1px buttonhighlight outset";
window.focus();
}
}
</SCRIPT>>
</BODY>
</HTML>
In the STYLE, we override the BUTTON default border, by creating our invisible border. We also define the font to be used here because, unlike SPANs, BUTTONs, regarded as "controls" by Explorer, do not inherit styling from parent elements.
The remainder of the HTML and script is the same as with the SPAN elements. In the onmouseup handler, however, we add a window.focus() statement. This is necessary for preserving a "clean" look. When a BUTTON is clicked, it remains highlighted with the Explorer dotted outline. By switching the focus to the window, which is like clicking outside the BUTTON, the highlight is removed.
On the next page, more reasons for using BUTTON.
Produced by Peter Belesis and
Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs 
All Rights Reserved. Legal Notices.
Created: Jan 25, 2000
Revised: Jan 25, 2000
URL: http://www.webreference.com/dhtml/column29/3.html
