请问如何实现ie工具条上鼠标移上去是突出的效果

hongquake 2003-07-09 03:37:55

我想用button的方法来实现，但是这样位置有偏差，代码如下，应该如何实现才好？

<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
.on{display:online}
.off{display:none}
</style>
<script language="javascript">
function showButton(){
var tableNode,buttonNode;
tableNode=document.all.item("1");
buttonNode=document.all.item("2");
tableNode.className="off";
buttonNode.className="on";
}
function hideButton(){
var tableNode,buttonNode;
tableNode=document.all.item("1");
buttonNode=document.all.item("2");
tableNode.className="on";
buttonNode.className="off";
}

</script>
</head>

<body>
<table border="0" cellpadding="0" cellspacing="0" height="30" bgcolor="#E4E4E4" id="1" style="cursor:hand" onMouseOver="showButton()" class="on">
<tr>
<td align="right"><img src="" /></td>
<td valign="bottom" style="font:12">刷新</td>
</tr>
</table>
<button class="off" id="2" style="cursor:hand" onMouseOut="hideButton()" >
<table border="0" height="20" cellpadding="0" cellspacing="0" bgcolor="#E4E4E4">
<tr>
<td align="right"><img src="" /></td>
<td valign="bottom" style="font:12">刷新</td>
</tr>
</table>
</button>
</body>
</html>

...全文

56 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

zhanghk 2003-07-09

打赏
举报

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
body
{
font: 9pt 宋体; margin-left: 0; margin-top:0; margin-right:0; margin-bottom:0
}
td
{
font: 9pt 宋体;
}
</style>
</HEAD>

<script>
function ToOutset(obj)
{
obj.style.borderLeft = "1px solid #FFFFFF";
obj.style.borderTop = "1px solid #FFFFFF";
obj.style.borderRight = "1px solid #808080";
obj.style.borderBottom = "1px solid #808080";
}

function ToInset(obj)
{
obj.style.borderLeft = "1px solid #808080";
obj.style.borderTop = "1px solid #808080";
obj.style.borderRight = "1px solid #FFFFFF";
obj.style.borderBottom = "1px solid #FFFFFF";
}

function ToFlat(obj)
{
var border = obj.style.backgroundColor;
if (border=="transparent")
border="#C0C0C0";

obj.style.borderLeft = "1px solid " + border;
obj.style.borderTop = "1px solid " + border;
obj.style.borderRight = "1px solid " + border;
obj.style.borderBottom = "1px solid " + border;
}

function __btnOnMouseOver(obj)
{
ToOutset(obj);
}

function __btnOnMouseOut(obj)
{
ToFlat(obj);
}

function __btnOnMouseDown(obj)
{
ToInset(obj);
}

function __btnOnMouseUp(obj)
{
ToOutset(obj);
}

</script>

<BODY>
<TABLE bgColor=#dddddd cellPadding=0 cellSpacing=0
style="BACKGROUND-COLOR: #dddddd; BORDER-BOTTOM: #dddddd 1px solid; BORDER-LEFT: #dddddd 1px solid; BORDER-RIGHT: #dddddd 1px solid; BORDER-TOP: #dddddd 1px solid; CURSOR: hand; DISPLAY: block; HEIGHT: 20px; PADDING-BOTTOM: 2px; PADDING-TOP: 2px; WIDTH: auto" title="测试"
onmouseover="__btnOnMouseOver(this)" onmouseout="__btnOnMouseOut(this)" onmousedown="__btnOnMouseDown(this)" onmouseup="__btnOnMouseUp(this)">
<TBODY>
<TR>
<TD align=middle style="PADDING-BOTTOM: 1px; PADDING-LEFT: 3px; PADDING-RIGHT: 3px; PADDING-TOP: 1px" vAlign=center>
<IMG align=absMiddle height=16 src="Add.gif" width=16>
</TD>
<TD align=middle noWrap style="PADDING-BOTTOM: 1px; PADDING-LEFT: 3px; PADDING-RIGHT: 3px; PADDING-TOP: 1px" vAlign=center>
测试
</TD>
</TR>
</TBODY>
</TABLE>
</BODY>
</HTML>

jsidiot 2003-07-09

打赏
举报

<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
.coolButton {border: 1px solid buttonface; padding: 1px; text-align: center; cursor: default;font: menu;}
.coolBar {background: buttonface;border-top: 1px solid buttonhighlight; border-left: 1px solid buttonhighlight; border-bottom: 1px solid buttonshadow; border-right: 1px solid buttonshadow; padding: 2px; font: menu;}
</style>
<script language="javascript">
function showButton(){

}
function hideButton(){

}

</script>
</head>

<body>
<table border="0" height="20" cellpadding="0" cellspacing="0" bgcolor="#E4E4E4">
<tr>
<td valign="bottom" class=coolButton onmouseover='this.className="coolBar"' onmouseout='this.className="coolButton"'>刷新</td>
</tr>
</table>
</button>
</body>
</html>