image替换button，怎么给image添加鼠标滑过与点击样式！鼠标滑过替换图片，鼠标点击在替换令一张。

如题：我有三张图片，启动后先是图片1，鼠标悬停显示图片2，鼠标点击显示图片3，点击后执行1。求相关的帖子，博客，最好能有个小例子不胜感激！

6 个解决方案

#1

/*CSS:*/
button{background:url(图片1)}
button:hover{background:url(悬停图片)}
button:active{.....}/*不知道这个行没??*/

#2



假设现在有三个图片分别名字为 img1 src="img1.gif" img2 src="img2.gif" img3 src="img3.gif" 


$(function(){

    $("img").mouseover(function(){

     $(this).attr("src","img2.gif")

 }) ;

     $("img").click(function(){

     $(this).attr("src","img3.gif")

 }) ;

     $("img").mouserout(function(){

     $(this).attr("src","img1.gif")

 }) ;

}) ;



<img src="img1.gif" />

#3

我给你写了一个 image替换button，怎么给image添加鼠标滑过与点击样式！鼠标滑过替换图片，鼠标点击在替换令一张。



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title> New Document </title>

<meta name="Generator" content="EditPlus">

<meta name="Author" content="">

<meta name="Keywords" content="">

<meta name="Description" content="">

<script type="text/javascript">

<!--


	function tupian1(a){

		a.src = "http://img.my.csdn.net/uploads/201211/23/1353647562_2279.JPG"

	}

	function tupian2(a){

		a.src = "http://img.my.csdn.net/uploads/201211/23/1353647578_8877.JPG"

	}


	function tupian3(a){

		a.src = "http://img.my.csdn.net/uploads/201211/23/1353647562_6350.JPG"

	}

//-->

</script>

</head>


<body>

<div>

	<p><b>供选图片：</b></p>

	<table border="1" cellspacing="0">

		<tr>

			<td><img src="http://img.my.csdn.net/uploads/201211/23/1353647562_2279.JPG" /></td>

			<td><img src="http://img.my.csdn.net/uploads/201211/23/1353647578_8877.JPG" /></td>

			<td><img src="http://img.my.csdn.net/uploads/201211/23/1353647562_6350.JPG" /></td>

		</tr>

	</table>

</div>

<br /><br /><br /><br />

<div>

	<p><b>运行效果如下（<font color="red">请操作下图</font>）：</b></p>

	<table border="1" cellspacing="0">

		<tr>

			<td><img src="http://img.my.csdn.net/uploads/201211/23/1353647562_2279.JPG" 

			         onmouseenter ="tupian2(this)"

					 onmousedown="tupian3(this)"

					 onmouseup="tupian1(this)"/></td>

		</tr>

	</table>

</div>


</body>

</html>

运行效果截图如下：
image替换button，怎么给image添加鼠标滑过与点击样式！鼠标滑过替换图片，鼠标点击在替换令一张。

#4

2楼就可以了。

#5

谢谢，1楼2楼提供思路，敢写三楼提供的代码，按照你的方法写出来了！不胜感激！

#6

因为三楼代码具体，所分给三楼多点，对我这样的新人很有帮助！

#1