网页按钮使用的各种代码.pdfVIP

网页按钮使用的各种代码 按钮总的来说是 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==INPUTel.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