HTML <img> 标签的 ismap 和 usemap 属性

<img> 标签的 ismap 和 usemap 属性告诉浏览器这个图像是一个特殊的可视映射，可以通过鼠标来对一个或多个超链接进行选择，也就是通常所说的图像映射（image map）。

ismap 属性

图像映射的 ismap 样式被称为 “服务器端”图像映射，它只可以用在 <a> 标签标识的超链接里面。

请看下面的例子：

<a href="/example/map">
  <img src="/i/map.gif" ismap="ismap" />
</a>

当用户在 ismap 图像上单击了某处时，浏览器会自动把鼠标的 x、y 位置（相对于图像的左上角）发送到服务器端。特殊的服务器端软件（在本例中是 /example/map 程序）可以根据这些坐标来做出响应。

usemap 属性

usemap 属性提供了一种“客户端”的图像映射机制，有效地消除了服务器端对鼠标坐标的处理，以及由此带来的网络延迟问题。通过特殊的 <map> 和 <area> 标签，HTML 创作者可以提供一个描述 usemap 图像中超链接敏感区域坐标的映射，这个映射同时包含相应的超链接 URL。usemap 属性的值是一个 URL，它指向特殊的 <map> 区域。用户计算机上的浏览器将把鼠标在图像上单击时的坐标转换成特定的行为，包括加载和显示另外一个文档。

我们举例说明一下，下面这段源代码将一个 100x100 像素的图像 map.gif 映射为 4 个区域，当用户单击其中某一个区域时，将被链接到不同的文档中。请注意，在这个 <img> 标签中，我们已经有效地包含了对 ismap 图像映射的处理功能，这样，那些使用不具有 usemap 处理功能的浏览器用户，就可以通过另外一中途径，即服务器端机制来处理图像映射：

<a href="/example/map">
  <img src="/i/map.gif" ismap="ismap" usemap="#map" />
</a>
<map name="map">
  <area coords="0,0,49,49" href="link1.html">
  <area coords="50,0,99,49" href="link2.html">
  <area coords="0,50,49,99" href="link3.html">
  <area coords="50,50,99,99" href="link4.html">
</map>

ismap 属性和 usemap 属性的应用差异

地图就是很好地应用 ismap 和 usemap 属性的一个示例，例如，在浏览一家全国范围的大公司网页时，用户可能会在地图上单击他们所居住的城市，以获得附近地区零售店的地址和电话号码等。

usemap 客户端处理图像映射的好处是，它不要求有服务器或特殊的服务器软件，与 ismap 机制不同，它可以用在非 web （无网络）环境中，例如在本地的文件或者 CD-ROM 中使用。