7.1.3　翻滚图像

翻滚图像只是通过鼠标光标移动到图像上来触发的一个图像交换（参见7.1.1节）。换句话说，直接给mouseover事件分配一个图像交换。例如，假设你在页面上有一个ID为photo的图像。当鼠标光标移动到图像上时，我们希望出现一个新的图像。可以使用jQuery来完成，如下所示：

1＜script src="js/jquery-1.6.3.min.js"＞＜/script＞

2＜script＞

3$（document）.ready（function（）{4

var newPhoto=new Image（）；5 newPhoto.src='images/newImage.jpg'；

6$（'#photo'）.mouseover（function（）{

7$（this）.attr（'src'，newPhoto.src）；

8}）；//end mouseover

9}）；//end ready

10＜/script＞

第3行和第4行预载入了要交换的图像。第5行等待HTML载入，然后，JavaScript可以访问HTML的当前图像。代码剩下的部分给图像分配一个mouseover事件，以及改变图像的src属性以匹配新图像的函数。

既然滚动图像通常会在鼠标光标移开的时候恢复到旧的图像，我们也需要一个mouseout事件来换回图像。正如5.4.2节所介绍的，jQuery提供了自己的事件，叫做hover（），它负责mouseover和mouseout事件：

1＜script src="js/jquery-1.6.3.min.js"＞＜/script＞2＜script＞

3$（document）.ready（function（）{4

var newPhoto=new Image（）；5

newPhoto.src='images/newImage.jpg'；6

var oldSrc=$（'#photo'）.attr（'src'）；7$（'#photo'）.hover（

8 function（）{

9$（this）.attr（'src'，newPhoto.src）；

10}，

11 function（）{

12$（this）.attr（'src'，oldSrc）；

13}）；//end hover

14}）；//end ready

15＜/script＞

hover（）函数接收两个参数：第一个参数是一个函数，告诉浏览器当鼠标光标移动到图像上的时候做些什么；第二个参数也是一个函数，告诉浏览器当鼠标光标从图像上移开的时候做些什么。这段代码还添加了一个变量oldSrc，通过它来记录原始图像的src属性，也就是当页面载入的时候出现的图像的文件路径。

我们不仅限于翻滚图像，还可以为任何标签（包括一个链接、一个表单元素，甚至一个段落）添加一个hover（）函数。通过这种方式，页面上的任何标签都可以触发页面其他位置的一幅图像发生变化。例如，假设当鼠标光标移动到页面的＜h1＞标签上，我们希望更换一幅照片。假设目标图像和前面的例子相同。修改的代码如粗体所示：

1＜script src="js/jquery-1.6.3.min.js"＞＜/script＞2＜script＞

3$（document）.ready（function（）{4

var newPhoto=new Image（）；5

newPhoto.src='images/newImage.jpg'；6 var oldSrc=$（'#photo'）.attr（'src'）；

6 var oldSrc=$（'#photo'）.attr（'src'）；

7$（'h1'）.hover（

8 function（）{

9$（'#photo'）.attr（'src'，newPhoto.src）；

10}，

11 function（）{

12$（'#photo'）.attr（'src'，oldSrc）；

13}）；//end hover

14}）；//end ready

15＜/script＞