完成本任务所用到的主要知识点：
➢页面元素对象的style属性
➢CSS样式中的background-position属性
➢onmoseover事件和onmouseout事件
为了能更加吸引用户，准备在页面中使用可变外观的按钮，即按钮在未被用户操作时使用一种样式，当用户将鼠标移入按钮表面时，按钮切换为另一种样式。
按钮普通状态时的样式，注意箭头外围为草绿色，如图上机5.1所示。
图上机5.1 按钮普通状态时的样式
用户将鼠标置于按钮表面时的样式，注意箭头外围为深灰色，如图上机5.2所示。
图上机5.2 用户将鼠标置于按钮表面时的样式
按钮样式所需的背景图片已为你准备好。注意上半部分的箭头外围为草绿色，下半部分的箭头外围为深灰色。如图上机5.3所示。
图上机5.3 按钮素材
改变按钮的样式其实是通过改变按钮的背景图片来实现的，但现在图片只有一张，它包含了两种样式所需的背景。CSS中可以设置background-position来指定背景图片的位置。页面元素对象的style属性可获得样式信息。(www.xing528.com)
（1）创建网页文档。
（2）编写如下代码实现页面基本结构和按钮本身。
（3）在<style></style>标签中编写CSS样式代码，如下：
（4）至此已经实现了按钮在普通状态时的样式。运行页面，结果如图上机5.4所示。
图上机5.4 按钮普通状态时的样式
（5）修改按钮的HTML代码，为它增加当鼠标移入它表面时改变样式的代码，如下：
使背景图片从背景区域顶端之上42像素处开始显示，这样在背景区域只能看到背景图片的下半部分。
（6）运行页面，将鼠标置于按钮表面，此时它的样式应如图上机5.5所示。
图上机5.5 用户将鼠标置于按钮表面时的样式
（7）继续修改按钮的HTML代码，为它增加当鼠标移出它表面时还原为原来的样式的代码，如下：
（8）运行页面，测试功能。
免责声明：以上内容源自网络，版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。
