类型为image的input标签，鼠标点击切换按钮背景图片

最新推荐文章于 2022-02-09 17:48:49 发布

sum__mer

最新推荐文章于 2022-02-09 17:48:49 发布

阅读量3.1k

点赞数

本文链接：https://blog.csdn.net/sum__mer/article/details/52185043

版权

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='打开'/>

sum__mer

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
类型为image的input标签，鼠标点击切换按钮背景图片

input标签生成的按钮，使用图片作为按钮背景，鼠标点下时切换背景图片，鼠标松开时，回到默认背景图片。使用的背景图片如下：效果图： $(function(){ //"打开"按钮控制 var openbutton = $("#openvideo"); openbutton.mousedown(function(){ openbutton.
复制链接

扫一扫