参考资料

1. HTML DOM 返回一个表单acceptCharset属性的值
2. HTML DOM改变单元格横跨的列数(colspan属性)
3. HTML DOM 访问
4. HTML DOM 返回一个button的name 实例
5. HTML DOM对单个单元格的内容垂直对齐
6. HTML DOM document.write() 方法
7. HTML DOM 鼠标的坐标？
8. HTML DOM在下拉列表中选择多个选项

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"