input标签生成的按钮,使用图片作为按钮背景,鼠标点下时切换背景图片,鼠标松开时,回到默认背景图片。下面提供的背景图片,另存为后可验证代码。图片名依次为1down.png、1up.png、2down.png、2up.png:
效果图:
<!DOCTYPE html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script>
$(function(){
//"打开"按钮控制
var openbutton = $("#openvideo");
openbutton.mousedown(function(){
openbutton.attr('src','1down.png');
}).mouseup(function(){
openbutton.attr('src','1up.png');
});
//"关闭"按钮控制
var closebutton = $("#closevideo");
closebutton.mousedown(function(){
closebutton.attr('src','2down.png');
}).mouseup(function(){
closebutton.attr('src','2up.png');
});
});
</script>
</head>
<body>
<input type='image' id="openvideo" src='1up.png'/>
<input type='image' id="closevideo" src='2up.png'/>
</body>
</html>
此处的图片已经P上了文字。如果使用如下代码,title的内容会被图片覆盖
<input type='image' id="openvideo" src='1up.png' title='打开'/>