原因之4—更好地利用图形
由于BUTTON是“控件“，它们是作为迷你文档而存在的，因此所包含的HTML被包装在它们的边界线内，并在普通的HTML流以外。现在我们尝试来重新创建Internet Explorer工具栏的一部分，在 DHTML 中使用 BUTTON、图形和文本。请先点击这里看看其中的效果图1。
要创建上面看过的图1所示的工具栏，使用以下HTML和脚本：
< 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;
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>
|
