网页按钮大本营

--- 按钮总的来说是WINDOWIN中最学用的也是最基本的一种控制部件，比如在各种编程语言中及应用程序中都少不了按钮的参与，在网页设计中也是如此，通过按钮可以完成很多任务，以下将全面讲解按钮使用技巧及应用实例。 

---- 一、按钮的基本使用 

---- 一般的可视性方法，那么可用下面的源代码制作按钮，其中onclick决定按下按钮的动作： 

    < form method="POST" >
< p >< input type="button" name="B1" value=
"按钮" >< /p >
     onclick > < /p >
    < /form >

---- 如果只使用单独的按钮，那么可省略form标签，只使用单纯的按钮代码，将节省按钮所占的网页空间： 
< p >< input type="button" name="B1" value=
"按钮" >< /p >
     onclick > < /p >

---- 二、按钮的前景与背景控制 
---- 绝大多数的人使用按钮时，都直接使用缺省的灰白色按钮有黑色的文字说明，其实按钮的背景和前景是可以随意改变的，请看下面的代码： 

    < form name="highlight" >
< p align="center" >< input type=
"button" value="变色按钮"
    style="background-color: rgb(255,0,0);
    color: rgb(255,2550,0)"
    onclick > < /p >
    < /form >

---- 其中background-color控制背景色，color按钮前景色； 
---- 三、按钮的图片背景 

---- 按钮不仅可以修改前景色和背景颜色，而且可以使用图片背景，下面的代码分别演示了固定的背景图片效果和动态的图片背景效果，动态的效果即在鼠标放到按钮上时，按钮的背景是另外一种图像背景，而鼠标离开时则恢复原来的图片背景，下面代码中的mainbb1.jpg和mainbb2.jpg 分别为两个图像文件： 

    < script >
    < !--
    if (document.images){
    after=new Image()
    after.src="mainbb1.jpg"}
    function change2(image){
    var el=event.srcElement
    if (el.tagName=="INPUT"&&el.type=="button")
event.srcElement.style.backgroundImage=
"url"+"('"+image+"')"}
    //-- >
    < /script >

    < form onmouseover="change2('mainbb1.jpg')"
    onmouseout="change2('mainbb2.jpg')" >
< p align="center" >< input type="
button" name="frme2"
    value="变化背景"
    style="background-color: rgb(192,192,192);
            FONT-FAMILY: 宋体; 
FONT-SIZE: 12pt;background-image: url('mainbb2.jpg')"
class="initial" onclick="(h1.htm')" 
< br > < input type="submit"
    name="B1" value="固定背景"
style="FONT-SIZE: 12pt; background-image: 
url('mainbb1.jpg')" >< /p >
    < /form >

---- 四、按钮字号和字型控制 
---- 按钮上显示的文字也可以随意改变风格，可以设置字体的字型和字号，请看以下代码： 

    < form name="highlight"  >
    < p align="center" >
    < input type="button" value="变化字号"
    style="background-color: rgb(192,192,192);
    FONT-FAMILY: 宋体; FONT-SIZE: 9pt"
    color: rgb(255,2550,0)"); onclick >
    < input type="button" value="变化字号"
    style="background-color: rgb(192,192,192);
    FONT-FAMILY: 宋体; FONT-SIZE: 12pt"
    color: rgb(255,2550,0)"); onclick >
    < /p >
    < /form >

---- 五、按钮鼠标移动变色 
---- 上面已经介绍了按钮的颜色控制方法，加上鼠标事件的参与即可实现鼠标移动变色，下面是完整的代码： 

< HTML >
< head >
< meta http-equiv="Content-Type"
content="text/HTML; charset=gb_2312-80" >
< meta name="GENERATOR" content=
"Microsoft FrontPage Express 2.0" >
< title >变色按钮< /title >
< style >
.bigChange {color:blue; font-weight:bolder; 
font-size:175%;letter-spacing:4px; 
text-transform: uppercase; background:yellow}
.start 
.over 
 < /style >
< /head >
< body bgcolor="#83E09C" >
< p >
< script language="javascript" >
  function highlightButton(s) {
    if ("INPUT"==event.srcElement.tagName)
      event.srcElement.className=s  }
< /script > < /p >
< form name="highlight" onmouseover=
"highlightButton('start')"
    onmouseout="highlightButton('over')" >
< p align="center" >< input type=
"button" value="变色按钮"); onclick > < /p >
< /form >
< /body >
< /HTML >

---- 六、鼠标移动按钮变字号 
---- 利用同样的方法，也可以使按钮在鼠标移动时变换字号，其实字号的变化也引起了按钮尺寸的变化，这一效果能够引起游览者的注意力，当然也可以合起来使字号和颜色同时发生变化： 

 < HTML >
 < head >
 < meta http-equiv="Content-Type"
 content="text/HTML; charset=gb_2312-80" >
 < title >变号按钮< /title >
 < style >
 .bigChange {color:blue; letter-spacing:4px;
 text-transform: uppercase; background:yellow}
 .start 
 .over 
  < /style >
 < /head >
 < body bgcolor="#83E09C" >
 < script language="javascript" >
   function highlightButton(s) {
      if ("INPUT"==event.srcElement.tagName)
      event.srcElement.className=s  }
 < /script >
 < form name="highlight" onmouseover=
"highlightButton('start')"
 onmouseout="highlightButton('over')"