如何将图片做成按钮的效果呢，就是点的时候，有按下、起来的效果，如何作？_html/css_WEB-ITnose

我有一个图片做成的链接：

<a href="xxxxx.html" target="_blank"><img  src="/static/imghwm/default1.png"  data-src="images/xxxx.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" border="0" alt="如何将图片做成按钮的效果呢，就是点的时候，有按下、起来的效果，如何作？_html/css_WEB-ITnose" ></a>

现在我想让这个图片具有按钮的效果，就是点的时候，有按下、起来的效果，如何作？

谢谢！

回复讨论(解决方案)

按下 起来 分别有不同的图片 。

是不是要切换里面的图片 ？

我不需要切换图片，就这一个图片，就是模拟一下按钮效果就行

css来做，用两张图做背景，鼠标经过或按下的时候换成有效果的背景就可以了。
特别专题
.btn {background: url("http://a.tbcdn.cn/p/fp/2011a/assets/sprites.gif") no-repeat  -311px -19px;text-indent: -9999px;}
.btn:hover{background-position: -311px -468px;}

试试看box-shadow吧，调得好的话，会有你想要的结果

box-shadow ,怎么用啊？

用html里面的事件
http://www.w3school.com.cn/html/html_eventattributes.asp

onclick  脚本  当鼠标被单击时执行脚本

onmousedown  脚本  当鼠标按钮被按下时执行脚本

onmouseout  脚本  当鼠标指针移出某元素时执行脚本

onmouseover  脚本  当鼠标指针悬停于某元素之上时执行脚本

onmouseout="this.style.color='#fff'"这个样式就是改变字体的，你可以改变他的边框这些。效果就会很明示了。

前两天我对一个input元素进行控制采用了以下的代码：

<input type="text" value="用户名" name="" onfocus="if(this.value=='用户名') {this.value='';}this.style.color='#333';this.style.borderColor='#4d90fe';" onblur="if(this.value=='') {this.value='用户名';this.style.color='#333';}" onmouseover="this.style.borderColor='#888'" onmouseout="this.style.borderColor='#b9b9b9'" title="请输入用户名！" />

<input type="image" src="images/xxxx.jpg"   />

图片跟按钮一样。

用css显示不同的图片

都不好用啊，还请帮忙

鼠标悬停，离开时，图片变换大小，试试。

有没有测试过的代码，我属于初学，不太懂，谢谢

有没有具体的例子？初学，多谢了！

http://www.mayixueyuan.com/newshow.php?id=145

http://www.mayixueyuan.com/UploadFile/file/html_all/20110725_html_css_button/20110725_html_css_button.html

实例。

flash 按钮

上过起点中文网吗。
设置偏移几PX可以简单达到近似的效果。

js:
function set(cssname,obj)
{
obj.className=cssname;
}
css:
.down(left:1px;top:1px;)
.up{left:0;top:0;}

试试可以吗

#19的，没有效果啊。

#16楼，我是要用图片，不是用css

我把事件写错了。。。


js:
function set(cssname,obj)
{
obj.className=cssname;
}
css:
.down(left:1px;top:1px;)
.up{left:0;top:0;}

试试

全写在dreamwaver里面吗>