HTML DOM 返回图像映射某个区域的坐标实例

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配合实现更复杂的视觉效果。