我的书签
添加书签
移除书签第三部分：构建网页功能
第7章 改进图像
Web设计师使用图像来改进页面的设计，装饰导航栏，突出显示页面上的元素，并展示他们的上一次度假多么有趣。向Web页面添加图像立即就增添了兴趣和视觉吸引力。当添加了JavaScript来混用，可以通过在页面上动态地改变图像、显示一个动画的照片集，或者在自动运行的幻灯片中显示一系列照片等来增加激动人心的内容。在本章中，我们将学习在Web站点上操作和显示图像的一系列技术。
7.1 交换图像
单个的、最常见的JavaScript的用法可能就是简单的图像翻滚：当把鼠标光标移动到一幅图像上时，它改变为另外一幅图像。这一基本技术从JavaScript诞生就开始用来创建交互式的导航栏，当鼠标光标悬停在导航栏上时，其按钮会改变外观。但是，在过去的几年里，越来越多的设计师倾向于使用CSS来实现同样的效果（例如，参见www.monkeyflash.com/css/image-rollover-navbar/）。然而，即便使用CSS来创建交互式的导航栏，但如果要创建幻灯片、图像集以及为Web页面添加其他类型的交互图像，我们还是需要理解如何使用JavaScript来交换一个图像。
7.1.1 改变图像的src属性
显示在Web页面上的每个图像都有一个src属性（source的缩写），它表示一个图形文件的路径。换句话说，它指向了Web服务器上的一幅图像。如果改变这个属性指向一个不同的图形文件，浏览器将会显示新的图像。假设在页面上有一幅图像并且给它一个ID为photo。使用jQuery，可以动态地修改src属性来指向一幅图像。例如，假设页面上有一幅图像，并且给它分配了一个ID为photo。HTML可能如下所示：
＜img src="images/image.jpg"width="100"height="100"id="photo"＞
要将其换为另一幅图像，只需要使用attr（）函数（参见本书4.9节）来将该标签的src属性设置为一个新的文件，如下所示：
$（'#photo'）.attr（'src'，'images/newImage.jpg'）；
注意：当使用JavaScript改变一幅图像的src属性的时候，图像文件的路径是基于页面的位置的，而不是基于JavaScript代码的位置。当我们使用位于不同目录的一个外部JavaScript文件的时候（参见1.2节），这点可能容易令人混淆。在上面的例子中，Web浏览器将会尝试从一个名为images的文件夹下载newImage.jpg文件，该文件夹和Web页面都位于同一文件夹下。即便代码包含在一个外部文件中，而该文件位于站点其他地方的另一个文件夹中，这种方法也是有效的。因此，在外部JavaScript文件中使用根相对链接常常更容易（参见本书1.2节中的“快速熟悉：URL类型”部分了解关于不同链接类型的更多信息）。
然而，改变图像的src属性并不会改变＜img＞标签的任何其他属性。例如，如果alt属性是在HTML中设置，交换后的图像和最初的图像具有相同的alt文本。此外，如果图像的width和height属性在HTML中设置了，改变图像的src属性使得新图像会放入到和最初图像同样大小的空间中。如果两个图像具有不同的尺寸，那么，交换后的图像会扭曲。
在导航栏中翻滚图像的情况下，两个图像很可能具有相同的大小并且共享同样的alt属性，因此，我们不会遇到问题。但是，可以通过直接在HTML中保留最初图像的width和height属性来完全避免图像扭曲的问题。那么，当新的图像交换进来的时候，Web浏览器会按照文件中的尺寸设置来显示图像。
另外一个解决方案是先下载新的图像，获取其尺寸，然后改变＜img＞标签的src、width、heigth和alt属性：
1 var newPhoto=new Image（）；
2 newPhoto.src='images/newImage.jpg'；
3 var photo=$（'#photo'）；
4 photo.attr（'src'，newPhoto.src）；
5 photo.attr（'width'，newPhoto.width）；
6 photo.attr（'height'，newPhoto.height）；
注意：左边的行号不是代码的一部分，因此，不要录入它们。它们只是为了使得代码容易阅读。
这一技术的关键在于第一行，它创建了一个新的image图像。对于Web浏览器来说，代码new Image（）就是在说“浏览器，我打算给页面添加一幅新的图像，请做准备”。下一行告诉Web浏览器真正地下载新的图像。第3行获取页面上当前图像的引用，第4行到第6行交换新的图像并且改变宽度和高度以适应新的图像。
提示：jQuery attr（）函数可以一次设置多个HTML属性。只要把包含每个属性的名字和新值的一个对象直接量（参见4.8.3节）传递给它就行了。可以用jQuery代码更简洁地重写上面的代码，如下所示：
var newPhoto=new Image（）；
newPhoto.src='images/newImage.jpg'；
$（'#photo'）.attr（{
src：newPhoto.src，
width：newPhoto.width，
height：newPhoto.height
}）；
通常，我们应该将图像交换技术和一个事件处理程序结合起来使用。例如，当访问者的鼠标光标悬停在图像上的时候，我们可以让该图像变为另一幅图像。这种翻滚效果经常用于导航栏，并且，我们将在本书7.1.3节学习如何创建该效果。然而，我们可以更改图像来响应任何事件，例如，每次单击页面上的一个箭头的时候，我们可以让一幅新的照片出现，就像是幻灯片一样。
