|
网页制作实用技巧:用图片代替提交和重置按钮(1) 为了整个界面美观,我们需要对提交和重置按钮美化一番,可是无论用什么CSS技巧">CSS样式定义按钮,都很难达到满意的效果,只得用JS+图片的方式进行处理,下边我是总结出的三种方法:
1、用图片代替提交和重置按钮,给图片加onclick事件
<script language="Javascript"> function fsubmit(obj){ obj.submit(); } function freset(obj){ obj.reset(); } </script> <form id="form1" name="form1" method="post" action="login.ASP"> 姓名: <input type="text" name="textfield" /> <img src="http://www.webjx.com/htmldata/2007-08-10/uploads/200707/30_145425_001.jpg" onClick="javascript:fsubmit(document.form1);"> <img src="http://www.webjx.com/htmldata/2007-08-10/uploads/200707/30_145428_002.jpg" onClick="javascript:freset(document.form1);"> </form>
2、给1的图片加上style,用于弥补方法1鼠标移到图片上无反应,未能给客户好的浏览体验
<script language="javascript"> function fsubmit(obj){ obj.submit(); } function freset(obj){ obj.reset(); } </script> <form id="form1" name="form1" method="post" action="login.asp"> 姓名: <input type="text" name="textfield" /> <img src="http://www.webjx.com/htmldata/2007-08-10/uploads/200707/30_145425_001.jpg" style="cursor:hand;" onClick="javascript:fsubmit(document.form1);"> <img src="http://www.webjx.com/htmldata/2007-08-10/uploads/200707/30_145428_002.jpg" style="cursor:hand;" onClick="javascript:freset(document.form1);"> </form>
3、用图片代替提交和重置按钮,并加上链接,效果同2
<script language="javascript"> function fsubmit(obj){
|