图片按钮

来源:互联网 发布:cat linux 查看指定列 编辑:程序博客网 时间:2024/04/28 07:21

图片按钮实现方式:
最简单、最常用、最不明智的用法
<a href="a.do"><img src="images/modify.gif" width="70" height="30" ></a>
这样实现方式效率比较低而且重要的是有很大的冗余,每个按钮都需要一张图片,比如“增加”、“修改”、“保存”、“删除”按钮。
而如果所有的按钮都只使用一张没有文字的按钮图片,在使用时将按钮文字写上,这样会比较好。
首先在css中定义:
css.css文件
.buttonImg {
 border: 1;
 height: 20px;
 width: 70px;
 cursor: hand;
 font-size: 12px;
 color: #ffffff;
 font-weight: normal;
 background-image: url("../images/bg.gif");
}
实现方式如下:
html:
<input  type="button" class="buttonImg" value="增 加" onclick="location.href='a.do'">
struts:
<html:submit value=" 修 改 " styleClass="buttonImg"/>

在freemarker中则不需要定义css实现方式如下:
<@ww.submit type="image" src="${base}/images/save.gif" />

原创粉丝点击