根据Mike Rundle 与Seamus P. H. Leahy的css图片替换的扩展技术和WebDesign-L mailing list中发布的一个帖子,我发掘了一个提交按钮和按钮标签的图片替换方法。
当样式表处于活动状态时,你就可以通过这个方法创建一个可点图像。在样式表关闭状态时,你可以创建一个标准按钮。秘诀就是将图片替换方法应用于按钮标签,并将它作为提交按钮使用。由于按钮边框已经被去掉了,所以可以将链接的按钮指针设置成手的形状,这样可以给用户一个明确的提示。
你看过运用Google 搜索框使用两种不同的方法的示例吗?这个适用于所有可以进行图片替换的浏览器:Firefox/Mozilla, IE 5/6, Opera 7/8, Konqueror 3.4 & Safari (特别感谢Philippe Wittenbergh提供的Mac 浏览器反馈信息)。
效果预览:http://www.ampsoft.net/webdesign-l/image-button.html
使用文本缩进来进行图片替换
通过上间隙属性进行图片替换
你可以通过下面的按钮看到没有CSS支持的页面:
注意:Google搜索框只是做为示例来使用的。Google 和 the Google logo 是Google 公司的标志。
现有问题
由于一些原因,在Opera中,不能够运用两种方法将指针应用于按钮。所以Opera的用户不能够使用这个指针。
在Internet Explorer中,如果按钮是如果按钮是父模块中的第一个元素,那么第一个方法将不可用。在按钮前添加一些内容(比如 )或者设置一些不显示的模块,可以解决这个问题。
Internet Explorer并不能够很好地处理提交按钮的名称属性。这通常是不相关的,除非你的一些脚本需要处理它的值。这里有一篇关于IE提交按钮问题的的文章(感谢Malcolm Campbell提供)。
CSS代码
#replacement-1 {
width: 100px;
height: 55px;
margin: 0;
padding: 0;
border: 0;
background: transparent url(SearchGoogle.gif) no-repeat center top;
text-indent: -1000em;
cursor: pointer; /* hand-shaped cursor */
cursor: hand; /* for IE 5.x */
}
#replacement-2 {
width: 100px;
height: 55px;
padding: 55px 0 0;
margin: 0;
border: 0;
background: transparent url(SearchGoogle.gif) no-repeat center top;
overflow: hidden;
cursor: pointer; /* hand-shaped cursor */
cursor: hand; /* for IE 5.x */
}
form>#replacement-2 { /* For non-IE browsers*/
height: 0px;
}