5、玩转图像翻转效果

玩转图像翻转效果

1. 图像翻转效果简介

图像翻转效果（Rollovers）是一种常见的网页交互效果，你肯定见过无数次了。当鼠标悬停在图像上时，图像会发生变化；鼠标移开后，图像又会恢复到原来的状态。这种效果能让你的网站更具交互性。

创建一个好的图像翻转效果，需要以下几个步骤：
- 告诉 JavaScript 检测能触发图像交换的鼠标事件。
- 根据鼠标事件，告诉 JavaScript 要交换的是哪几张图像。
- 用新图像替换旧图像。

2. 实际案例

2.1 Tin House 网站

Tin House（http://www.tinhouse.com）是一个文学期刊网站，其首页有一个小房子图标用于导航。当鼠标未悬停时，房子里的灯都是熄灭的；鼠标悬停在房子的不同部分时，相应区域的灯会亮起。

2.2 JavaScript 书籍首页

JavaScript 书籍首页也有一个简单的图像交换效果。当鼠标悬停在写着“Turn it over!”的图形上时，书籍的封面图像会切换为背面图像；鼠标移开后，又会切换回封面图像。

由于旧浏览器可能不支持图像翻转效果，或者用户可能关闭了 JavaScript，因此在创建这些效果时，还需要进行浏览器检测。同时，你还将学习到 JavaScript 中引号的处理方式，以及网页的层次结构模型（Document Object Model，DOM）在 JavaScript 语法中的体现。

3. 触发事件

到目前为止，我们看到的 JavaScript 代码都是在网页加载到浏览器时触发的。但