首页 >web前端 >html教程 >如何将图片做成按钮的效果呢,就是点的时候,有按下、起来的效果,如何作?_html/css_WEB-ITnose

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

WBOY
WBOY原创
2016-06-24 12:17:352304浏览

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

<a href="xxxxx.html" target="_blank"><img  src="images/xxxx.jpg"    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可以简单达到近似的效果。

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

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

试试可以吗

#19的,没有效果啊。

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

我把事件写错了。。。
如何将图片做成按钮的效果呢,就是点的时候,有按下、起来的效果,如何作?_html/css_WEB-ITnose

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

试试

全写在dreamwaver里面吗>

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn