DHTML工具栏,Web点击更精彩(5)
作者:未知 来源:转载 发布时间:2005-9-15 0:31:05 发布人:acx
原因之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>
< IMG
SRC="http://www.aspcool.com/lanmu/StopOff.gif" WIDTH=19 HEIGHT=20 BORDER=0>< BR>
Stop< /BUTTON>< BUTTON CLASS=but
>< IMG
SRC="http://www.aspcool.com/lanmu/RefreshOff.gif" WIDTH=17 HEIGHT=20 BORDER=0>< BR>
Refresh< /BUTTON>< BUTTON CLASS=but
>< IMG
SRC="http://www.aspcool.com/lanmu/HomeOff.gif" WIDTH=19 HEIGHT=20 BORDER=0>< BR>
Home< /BUTTON>< BUTTON CLASS=but
>< IMG
SRC="http://www.aspcool.com/lanmu/SearchOff.gif" WIDTH=20 HEIGHT=20 BORDER=0>< BR>
Search< /BUTTON>< BUTTON CLASS=but
>< IMG
SRC="http://www.aspcool.com/lanmu/FavoritesOff.gif" WIDTH=20 HEIGHT=20 BORDER=0>< BR>
Favorites< /BUTTON>< BUTTON CLASS=but
>< IMG
SRC="http://www.aspcool.com/lanmu/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>
由于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>
< IMG
SRC="http://www.aspcool.com/lanmu/StopOff.gif" WIDTH=19 HEIGHT=20 BORDER=0>< BR>
Stop< /BUTTON>< BUTTON CLASS=but
>< IMG
SRC="http://www.aspcool.com/lanmu/RefreshOff.gif" WIDTH=17 HEIGHT=20 BORDER=0>< BR>
Refresh< /BUTTON>< BUTTON CLASS=but
>< IMG
SRC="http://www.aspcool.com/lanmu/HomeOff.gif" WIDTH=19 HEIGHT=20 BORDER=0>< BR>
Home< /BUTTON>< BUTTON CLASS=but
>< IMG
SRC="http://www.aspcool.com/lanmu/SearchOff.gif" WIDTH=20 HEIGHT=20 BORDER=0>< BR>
Search< /BUTTON>< BUTTON CLASS=but
>< IMG
SRC="http://www.aspcool.com/lanmu/FavoritesOff.gif" WIDTH=20 HEIGHT=20 BORDER=0>< BR>
Favorites< /BUTTON>< BUTTON CLASS=but
>< IMG
SRC="http://www.aspcool.com/lanmu/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>