03-图像

发表于 分类于 ，

img 标签 属性 意义

  • src 包含图像的 URL，这个 URL 是相对于网页的 URL 来说的
  • width 包含浏览器显示图像所用的宽度（以像素为单位）
  • height 包含浏览器显示图像所用的高度（以像素为单位）
  • alt 用来在非图形化浏览器中替代图像

创建翻转器

翻转器背后的思想很简单。有两个图像。第一个图像是原始（original）图像，它与网页的其他部分一起加载和显示。当用户将鼠标移动到第一个图像上时，浏览器快速地将第一个图像替换为第二个图像，即替换（replacement）图像，这样就产生了运动或动画效果。

1
2
3
4
5
6
7
8
9
<body>
  <a
    href="next.html"
    onmouseover="document.images['arrow'].src='images/arrow_on.gif'"
    onmouseout="document.images['arrow'].src='images/arrow_off.gif'"
  >
    <img src="images/arrow_off.gif" id="arrow" alt="arrow"
  /></a>
</body>

种翻转器的缺点
这种实现翻转器的方法非常简单，但是你应该知道它有几个问题和缺点。
因为第二个图像是在用户将鼠标移动到第一个图像上时从服务器下载的，所以在第二个图像替换第一个图像之前，可以察觉到延迟，这对于用调制解调器而不是宽带连接浏览站点的用户尤其明显。

使用这种方法在老式浏览器中会产生错误消息，比如 Netscape 2.0 或更早的版本、IE 3.0 或更早的版本，或者 America Online 2.7 浏览器。因为很少有人还在使用这些过时的浏览器，所以这已经不是什么大问题了。

我们建议不要使用这种方法，而是使用 4.2 节中介绍的方法来创建翻转器，从而解决这些问题以及其他问题。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
window.onload = rolloverInit

function rolloverInit() {
  for (var i = 0; i < document.images.length; i++) {
    // 它的parentNode属性是包围它的容器标签，而tagName提供容器标签的名称。所以，圆括号中代码的意思是：“对于这个特定的图像，包围它的标签是A吗？”
    if (document.images[i].parentNode.tagName == "A") {
      console.log(document.images[i].parentNode.tagName)
      setupRollover(document.images[i])
    }
  }
}

function setupRollover(theImage) {
  // 这一行获得传递进来的图像对象，并在其中添加新的outImage属性。因为可以在对象上添加任何类型的属性，而且属性本身也是对象，所以这里的操作是将一个图像对象添加到图像中。
  theImage.outImage = new Image()
  theImage.outImage.src = theImage.src
  theImage.onmouseout = function () {
    this.src = this.outImage.src
  }

  theImage.overImage = new Image()
  theImage.overImage.src = "images/" + theImage.id + "_on.gif"
  theImage.onmouseover = function () {
    this.src = this.overImage.src
  }
}