Heim >Web-Frontend >HTML-Tutorial >如何将图片做成按钮的效果呢,就是点的时候,有按下、起来的效果,如何作?_html/css_WEB-ITnose
我有一个图片做成的链接:
<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可以简单达到近似的效果。
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里面吗>