参考资料

1. HTML DOM 返回和设置链接的charset属性实例
2. HTML DOM 返回image的name
3. HTML DOM对单个单元格的内容垂直对齐
4. HTML DOM 鼠标的坐标？
5. HTML DOM将下拉列表变成多行列表
6. HTML DOM 返回页面上所有相对链接的基链接 实例
7. HTML DOM 对image排版
8. HTML DOM 重置表单

HTML DOM usemap 属性

简介

usemap 属性用于将图像与客户端图像映射关联起来，指定图像映射的名称（带#号）。

标签

适用于 <img> 和 <object> 标签

用法

<img src="image.jpg" usemap="#mapname">
<map name="mapname">
  <area shape="rect" coords="0,0,50,50" href="page1.html">
  <area shape="circle" coords="100,100,50" href="page2.html">
</map>

实例

<img src="planets.jpg" usemap="#planetmap" alt="Planets">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>

功能

• 创建可点击的图像区域

• 将图像的不同部分链接到不同URL

• 支持矩形(rect)、圆形(circle)和多边形(poly)三种形状

CSS 扩展

可以通过CSS为图像映射区域添加样式：

area {
  outline: none; /* 移除点击时的虚线框 */
}

area:hover {
  cursor: pointer; /* 鼠标悬停时显示手型指针 */
}

/* 通过JavaScript和CSS结合实现更复杂的交互效果 */

DOM 访问

通过JavaScript访问usemap属性：

var img = document.getElementById("myImage");
var mapName = img.usemap; // 返回 "#mapname"