DHTML Application Toolbars - DHTML Lab | 5

Logo

DHTML Application Toolbars
rollovers


To complete the Internet Explorer toolbar, our images must rollover when the user mouses over and out:

  


To create the above 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" NOWRAP
   STYLE="width:20;background-color:buttonface;padding:2px;">
   <BUTTON CLASS=but>
      onClick="yourStopFunction()"<IMG
      SRC="StopOff.gif" WIDTH=19 HEIGHT=20 BORDER=0><BR>
      Stop</BUTTON><BUTTON CLASS=but
      onClick="yourRefreshFunction()"IMG
      SRC="RefreshOff.gif" WIDTH=17 HEIGHT=20 BORDER=0><BR>
      Refresh</BUTTON><BUTTON CLASS=but
      onClick="yourHomeFunction()"IMG
      SRC="HomeOff.gif" WIDTH=19 HEIGHT=20 BORDER=0><BR>
      Home</BUTTON><BUTTON CLASS=but
      onClick="yourSearchFunction()"IMG
      SRC="SearchOff.gif" WIDTH=20 HEIGHT=20 BORDER=0><BR>
      Search</BUTTON><BUTTON CLASS=but
      onClick="yourFavoritesFunction()"IMG
      SRC="FavoritesOff.gif" WIDTH=20 HEIGHT=20 BORDER=0><BR>
      Favorites</BUTTON><BUTTON CLASS=but
      onClick="yourHistoryFunction()"IMG
      SRC="HistoryOff.gif" WIDTH=20 HEIGHT=20 BORDER=0><BR>
      History</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>

The additional script performs a simple image rollover, which we are all familiar with. In our example, we have tried to limit the script size by adhering to a strict naming scheme. Our toolbar items have one-word text displays. This helps a lot, since we can use the same word to identify the relevant images. Our images are therefore named as follows:


StopOff.gif
RefreshOff.gif
HomeOff.gif
SearchOff.gif
FavoritesOff.gif
HistoryOff.gif

StopOn.gif
RefreshOn.gif
HomeOn.gif
SearchOn.gif
FavoritesOn.gif
HistoryOn.gif

In our script, we first identify the image that belongs to each button. Every image is the first element in each button. That is, it is the first child and at index 0 of the button's children collection. We assign the image to a custom property of the button, which we call img.

The button is also given two other properties, oversrc and outsrc. These store what the image's src should be during the mouseover and mouseout states. The value for these properties is determined by getting the button's displayed text (innerText) and appending the Off.gif and On.gif suffixes, respectively.

Finally, in the mouseover and mouseout handlers, we assign these values to the image's src property, creating the rollover.

And now, the final reason to use BUTTON for toolbars.


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/5.html