用好表单的按钮（二）
日期：2013-11-29 浏览次数：20699 次
一、动态变换文本按钮
鼠标不在按钮上
鼠标在按钮上
你看！这个按钮的效果不错吧？！制造这种效果的思路是这样的，利用CSS属性可以动态改变的特点，先给按钮定义两种外观款式，再在<input>标记中加上两个事件，即onmuseover（鼠标在按钮上）和onmuseout （鼠标离开按钮），我们用这两个事件分别调用不同的CSS定义的按钮外观款式，从而达到动态变换的效果。为了提高CSS的利用率（若有多个按钮，则可反复使用），把CSS放到<head>与</head>之间，在按钮中用class 调用CSS格式。本例在<head>与</head>之间的CSS代码是这样的：
<style type="text/css">
<!--
.style1 { font-size: 12px; background: #CCCCFF; border-width: thin thin thin thin; border-color: #CCCCFF #CCCCCC #CCCCCC #CCCCFF}
.style2 { font-size: 12px; font-weight: bold; background: #CCFFCC; border-width: thin medium medium thin; border-color: #CCFF99 #999999 #999999 #CCFF99}
-->
</style>
本例按钮的代码如下：
<input type="submit" name="Submit" value="提 交" class="style1">
从上面的代码中可看到，当鼠标移到按钮上，也就是onmuseover事件发生，那么按钮将采用style2甩定义的外观款式；当鼠标移开按钮时，也就是onmuseout事件发生，那么按钮就采用style1所定义的外观款式，从而实现了动态变化的目的。后面那个class="style1"的作用是当onmouseover、onmouseout这两个事件都没发生时，采用style1所定义的外观款式，从而保持了按钮外观的分歧性。
二、动态变换图像按钮
鼠标不在按钮上
鼠标在按钮上
本例与上例在制造思路和制造方法上均没有多大区别，只是采用了两张图片来作按钮背景，但产生的效果却非同普通。在制造这种效果的按钮时要留意两点：
1、作按钮背景的图片最好器具通明背景的gif图片，这样可以做出各种各样外形的按钮，将具有很强的特性；
2、背景图片的大小要与按钮的大小分歧，否则，由于背景的平铺填充，将使按钮面目全非。
下面是本例在<head>与</head>之间的CSS代码：
<style type="text/css">
<!--
.style3 { font-size: 12px; background: url(image/buttonbg1.gif); border: 0px; width: 60px; height: 22px}
.style4 { font-size: 12px; font-weight: bold; background: url(image/buttonbg2.gif); border: 0px 0; width: 60px; height: 22px}
-->
</style>
本例的按钮代码如下：
<input type="submit" name="Submit2" value="提 交" class="style3">
从按钮代码可看出它与例一的按钮代码完全相反，但本例的CSS代码与例一有较大的区别，这里要留意：url后面的括号中是按钮背景图片的地址，也就是含路径的图片文件名，你在实际制造时要把它改成图片的实际地址。
另外再多讲一句，你若是用图形化网页制造工具（如Dreamweaver)，那么凡是用CSS产生的效果，普通在编辑窗中是看不到的， 如本文的按钮效果，只要在预览时才能看到，在编辑窗口中看到的仍是表单默认的那种样子。
