61,112
社区成员
发帖
与我相关
我的任务
分享如何产生图片按钮被压下的效果
我需要在网页上产生一个按钮（实际上是3副png图片），当鼠标移动到它上面、按下和弹起时，通过更换图片来实现不同的效果，而且能够响应OnClick()事件，我应该如何写啊？
...全文
请发表友善的回复…
发表回复
aleckru 2003-02-10
- 打赏
- 举报
给你一个例子：
<html>
<head>
<style>
<!--
.mouseOut {
border-top: 1px;
border-left: 1px;
border-right: 1px;
border-bottom: 1px
}
.mouseOver {
border-top: 1px outset #ffffff;
border-left: 1px outset #ffffff;
border-right: 1px inset #000000;
border-bottom: 1px inset #000000;
}
.mouseClick {
border-top: 1px inset #000000;
border-left: 1px inset #000000;
border-right: 1px outset #ffffff;
border-bottom: 1px outset #ffffff;
}
--></style></head>
<body>
<img src = "your img file"
title = "this is a test."
class = "mouseOut"
onMouseOver = "this.className='mouseOver'"
onMouseDown = "this.className='mouseClick'"
onMouseOut = "this.className='mouseOut'"
onMouseUp = "this.className='mouseOver'">
</body>
</html>
<html>
<head>
<style>
<!--
.mouseOut {
border-top: 1px;
border-left: 1px;
border-right: 1px;
border-bottom: 1px
}
.mouseOver {
border-top: 1px outset #ffffff;
border-left: 1px outset #ffffff;
border-right: 1px inset #000000;
border-bottom: 1px inset #000000;
}
.mouseClick {
border-top: 1px inset #000000;
border-left: 1px inset #000000;
border-right: 1px outset #ffffff;
border-bottom: 1px outset #ffffff;
}
--></style></head>
<body>
<img src = "your img file"
title = "this is a test."
class = "mouseOut"
onMouseOver = "this.className='mouseOver'"
onMouseDown = "this.className='mouseClick'"
onMouseOut = "this.className='mouseOut'"
onMouseUp = "this.className='mouseOver'">
</body>
</html>
jzsh2000 2003-02-10
- 打赏
- 举报
<input type="button" name="cmd" value="按钮" onMouseOver="this.style.backgroundImage='url(images/1.gif)'" onMouseOut="this.style.backgroundImage=''" onMouseDown="this.style.backgroundImage='url(images/2.gif)'" onMouseUp="this.style.backgroundImage='url(images/3.gif)'">
lhm008 2003-02-10
- 打赏
- 举报
bencalie，切换三幅图片是上面要求的，请再想想办法
bencalie 2003-02-10
- 打赏
- 举报
<style>
.up {border:5 solid black;border-top:5 solid silver;border-left: 5 solid silver;}
.down {border:5 solid silver;border-top:5 solid black;border-left: 5 solid black;}
</style>
<img src="http://expert.csdn.net/images/csdn.gif" class="up" onmouseover="this.className='down'" onmouseout="this.className='up'">
.up {border:5 solid black;border-top:5 solid silver;border-left: 5 solid silver;}
.down {border:5 solid silver;border-top:5 solid black;border-left: 5 solid black;}
</style>
<img src="http://expert.csdn.net/images/csdn.gif" class="up" onmouseover="this.className='down'" onmouseout="this.className='up'">
bencalie 2003-02-10
- 打赏
- 举报
其实一张图片即可，设置4个border的颜色
