参考资料

1. HTML DOM 返回一个iframe中的longdesc属性的值
2. HTML DOM 返回图像映射某个区域的坐标实例
3. HTML DOM 改变一个包含在iframe中的文档的背景颜色
4. HTML DOM write() 和 writeln()的不同实例
5. HTML DOM shift键被按下了吗？
6. HTML DOM 修改 HTML 内容
7. HTML DOM 返回文档中第一个图像的ID
8. HTML DOM 返回一个iframe中的name属性的值

HTML DOM 返回一个客户端图像映射的usemap的值

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"