网页制作基础技巧 表单按钮的使用
新客网 XKER.COM 2006-10-11 来源： 收藏本文
本例按钮的代码如下：
| <input type="submit" name="Submit" value="提 交" onmouseover="this.className='style2'" onmouseout="this.className='style1'" 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="提 交" onmouseover="this.className='style4'" onmouseout="this.className='style3'" class="style3"> |
另外再多讲一句，你若是用图形化网页制作工具（如Dreamweaver)，那么凡是用CSS产生的效果，一般在编辑窗中是看不到的， 如本文的按钮效果，只有在预览时才能看到，在编辑窗口中看到的仍是表单默认的那种样子。
最新相关文章- ·用Dreamweaver轻松实现不同分辨率下的层定位
- ·Dreamweaver的应用源格式技巧
- ·Dreamweaver制作网页小技巧汇集
- ·请问Dreamweaver8无法启动如何解决？
- ·关于Dreamweaver MX 2004的PPT格式课件
- ·DW表格应用之细线框的制作
- ·Dreamweaver架设网站高级教程
- ·Dreamweaver制作网页的七大绝招
- ·Dreamweaver临时文件的工作方式
- ·用Dreamweaver制作网页中常用的过度效果
- ·Dreamweaver使用CSS样式表设置网页
- ·用DW8轻松制作漂亮的Flash像册
- ·解决DW8中CSS应用无效问题
- ·利用DW8掌握网页代码基本格式
- ·在Dreamweaver中灵活使用网页表格
- ·玩转DW属性检查器和文本格式设置
发表评论
评论内容：不能超过250字，需审核后才会公布，请自觉遵守互联网相关政策法规。
阅读排行
随机推荐
实用信息推荐