图片按钮

2008-10-01 13:33:00 | 【大中小】

把鼠标放在图片上并点击

轻松使用任何图片创建动态按钮效果，当鼠标滑过或者点击图片时都有类似按钮点击的效果

第一步：
在<head>区添加以下样式定义

<style>
<!--
.mouseBeOffMe {
border-top:    10px  solid #FFFFFF; 
border-bottom: 10px  solid #FFFFFF; 
border-left:   6px   solid #FFFFFF; 
border-right:  10px  solid #FFFFFF; 
}
.mouseBeOnMe {
border-top:    6px   solid #FFFFFF;
border-bottom: 14px  solid #FFFFFF; 
border-left:   10px  solid #FFFFFF; 
border-right:  6px   solid #FFFFFF;
}
.mouseBeDown {
border-top:    13px  solid #FFFFFF;
border-bottom: 7px   solid #FFFFFF; 
border-left:   10px  solid #FFFFFF; 
border-right:  6px   solid #FFFFFF;
}
.mouseBeUp {
border-top:    10px  solid #FFFFFF;
border-bottom: 10px  solid #FFFFFF; 
border-left:   10px  solid #FFFFFF; 
border-right:  6px   solid #FFFFFF;
}
//-->
</style>

第二步：
在<body>区添加图片，在<img>标签上添加相应的鼠标响应事件

<img src = "img/girls.jpg"
title = "This is the Image Label"
width = "90"
height = "40"
border = "0"
class = "mouseBeOffMe"
onmouseover = "this.className='mouseBeOnMe'"
onmousedown = "this.className='mouseBeDown'"
onmouseup = "this.className='mouseBeUp'"
onmouseout = "this.className='mouseBeOffMe'">

下载"图片按钮"

推荐给朋友

上一篇：按钮上的头条新闻
下一篇：简单的下拉列表导航菜单

图片按钮

下载"图片按钮"

相关资源