用 JavaScript 最常用的效果就是，当用户将鼠标移动到图片上时，会改变网页上的图像，这样页面就能对用户的操作及时作出反应，这种称为 翻转器（rollover）效果很容易实现，而且有很多应用场合。

创建翻转器

翻转器背后的思想很简单。有两个图像，第一个是原始图像，第二个是替换图像，当鼠标移动到第一个图像上时，浏览器快速地替换为第二个图像，就产生了运动或动画效果。

SimpleRollover.html 脚本，这是在链接标签中实现翻转器的最简单方法。

rollover.css 样式文件，很多例子中将用到该文件。

@charset "utf-8";/* CSS Document */body{
       background-color: #FFF;}img{
       border-width: 0;}img#arrow, img#arrowImg{
       width: 147px;    height: 82px;}#button1, #button2{
       width: 113px;    height: 33px;}.centered{
       text-align: center;}#adBanner{
       width: 400px;    height: 75px;}

脚本执行后，效果如下：

创建更有效的翻转器

为了产生动画效果，需要确保替换图像立刻出现，而不能有从服务器获得图像所造成的延迟。为此，使用 JavaScript 预先将所有图像加载到浏览器的缓存中，并且将图像放进脚本使用的变量中。MoreEffectiveRollover.html 页面和 MoreEffectiveRollover.js 脚本文件将演示具体的做法。

MoreEffectiveRollover.html 页面上唯一的 JavaScript 是对外部 MoreEffectiveRollover.js 文件的引用。

这个脚本 MoreEffectiveRollover.js 是比前面更好的实现翻转器的方法，很灵活。

window.onload = rolloverInit;function rolloverInit(){   for(var i=0; i

脚本执行后，效果和上面一样，只是动画更加流畅。

构建三状态翻转器

三状态翻转器就是能够显示图像的 3 个版本的翻转器。除了原始图像和当用户鼠标移动到图像上时显示的图像外，还有一个就是按钮本身被单击时的显示。

ThreeStateRollovers.html 页面和上面两状态翻转器相同，而 ThreeStateRollovers.js 脚本只修改几处而已。

window.onload = rolloverInit;function rolloverInit(){  for(var i=0; i

脚本执行后，单击按钮，显示绿色按钮，效果如下：

由链接触发翻转器

前面的例子，都是将鼠标移动到图像上来触发翻转器的，也可以通过鼠标指向文本链接时让图像翻转。

LinkRollover.html 页面中有一个文本链接。

     
     
Next page

LinkRollover.js 脚本将实现由链接触发的翻转器。

window.onload = rolloverInit;function rolloverInit(){  //寻找链接  for(var i=0; i

脚本执行后，如下效果：

让多个链接触发一个翻转器

还可以让几个不同的图像触发同一个翻转器。如果需要对多个图像进行说明，这种技术就非常有用。将鼠标移动到其中一个图像上时，就会显示出这个图像的描述。

我们的例子中正好说明这个技术。

MultiLinksSingleRollover.html ，注意这个页面上的链接和图像都有唯一的 id。

LinkRollover.css，我们定义在 HTML 中引用的类。

@charset "utf-8";body{
       background-color: #EC9;}img{
       border-width: 0;}#captionDiv{
       float: right;    width: 210px;    margin: auto 50px;}#captionField{
       margin: 20px auto;    width: 208px;    height: 27px;}#inventionDiv{
       width: 375px;    margin-left: 20px;}#heading{
       margin-bottom: 20px;    width: 375px;    height: 26px;}

MultiLinksSingleRollover.js 这个脚本将演示如何使用多个链接触发一个翻转器。

window.onload = rolloverInit;function rolloverInit(){  for(var i=0; i

脚本执行后，效果如下：

处理多个翻转器

如果希望触发翻转器的图像本身也是一个翻转器，那么该怎么办呢？我们在上一个示例的基础上进行改进，演示如何添加这个特性。

在将鼠标移动到一个自创图像上时，与前面一样，描述图像会出现，但是现在自创图像本身也会切换为另一个带阴影的图像，这会向用户提供视觉反馈，明确指出鼠标当前指向的元素。

MultiLinksMultiRollovers.html 除了标题和外部引用外，其余与上一个 HTML 页面一样。

MultiLinksMultiRollovers.js 脚本处理多个翻转器。

window.onload = rolloverInit;function rolloverInit(){  for(var i=0; i

脚本执行后，效果如下：

示例代码下载