文档介绍:网页按钮使用的各种代码
--- 按钮总的来说是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按钮前景色;
---- 三、按钮的图片背景
---- 按钮不仅可以修改前景色和背景颜色,而且可以使用图片背景,下面的代码分别演示了固定的背景图片效果和动态的图片背景效果,动态的效果即在鼠标放到按钮上时,按钮的背景是另外一种图像背景,而鼠标离开时则恢复原来的图片背景, 分别为两个图像文件:
< script >
< !--
if (){
after=new Image()
=""}
function change2(image){
var el=
if (=="INPUT"&&=="button")
=
"url"+"('"+image+"')"}
//-- >
< /script >
< form onmouseover="change2('')"
onmouseout="change2('')" >
< p align="center" >< input type="
button" name="frme2"
value="变化背景"
style="background-color: rgb(192,192,192);
FONT-FAMILY: 宋体;
FONT-SIZE: 12pt;background-image: url('')"
class="initial" onclick="(')"
< br > < input type="submit"
name="B1" value="固定背景"
style="FONT-SIZE: 12pt; background-image:
url('')" >< /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,