参考资料

1. HTML DOM禁用和启用下拉列表
2. HTML DOM 返回文档的标题实例
3. HTML DOM 返回一个iframe中的name属性的值
4. HTML DOM 用指定的ID弹出一个元素的innerHTML实例
5. HTML DOM 返回文档的最后一次修改时间 实例
6. HTML DOM删除表格中的行
7. HTML DOM 返回一个表单target属性的值
8. HTML DOM改变表格的cellpadding和cellspacing

HTML DOM 图像映射区域坐标实例

详细介绍

HTML DOM 可以通过 area 元素获取图像映射(Image Map)中某个区域的坐标信息。图像映射允许在图片上定义可点击区域，每个区域由 <area> 标签定义。

相关标签

1. <map> - 定义图像映射容器

2. <area> - 定义图像映射中的可点击区域

3. <img> - 使用 usemap 属性关联图像映射

基本用法

<img src="image.jpg" usemap="#mapName">
<map name="mapName">
  <area shape="rect" coords="x1,y1,x2,y2" href="link.html">
  <area shape="circle" coords="x,y,radius" href="link.html">
  <area shape="poly" coords="x1,y1,x2,y2,x3,y3,..." href="link.html">
</map>

获取区域坐标的JavaScript实例

// 获取所有area元素
var areas = document.getElementsByTagName('area');

// 遍历所有area元素
for (var i = 0; i < areas.length; i++) {
  console.log("Area " + (i+1) + " coordinates: " + areas[i].coords);
}

功能扩展

1. 动态修改区域坐标:

document.getElementById('area1').coords = "10,20,100,200";

2. 响应区域点击事件:

document.getElementById('area1').addEventListener('click', function() {
  alert("Clicked area with coordinates: " + this.coords);
});

CSS扩展

可以为图像映射区域添加视觉效果:

/* 鼠标悬停在区域上时改变光标样式 */
area:hover {
  cursor: pointer;
}

/* 通过伪元素显示区域轮廓 (需要JavaScript配合) */
img[usemap] {
  position: relative;
}

/* 为图像映射区域创建可视化效果 */
area::after {
  content: '';
  position: absolute;
  border: 2px solid red;
  pointer-events: none;
}

注意: 纯CSS无法直接样式化<area>元素，通常需要JavaScript配合实现更复杂的视觉效果。