参考资料

1. HTML DOM write() 和 writeln()的不同实例
2. HTML DOM 返回页面上所有相对URL的基URL 实例
3. HTML DOM 节点列表
4. HTML DOM添加表格行中的单元格
5. HTML DOM 修改
6. HTML DOM 打开输出流，向流中输入文本实例
7. HTML DOM 返回图像映射的某个区域的shape 实例
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"

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。