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

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

WBOY
WBOYOriginal
2016-06-24 12:17:352275Durchsuche

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

<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里面吗>

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn