<area>-图像映射区域

<area> 标签是 HTML 中用于定义图像映射（image map）的可点击区域的元素。它通常与 <map> 和 <img> 标签配合使用，允许开发者在图像上创建多个可交互的区域，每个区域可以链接到不同的 URL 或触发不同的行为。

<area> 标签的基本语法

<area> 标签是一个空元素，不需要闭合标签。它的基本语法如下：

<area shape="形状" coords="坐标" href="链接" alt="替代文本">

• shape：定义区域的形状，可以是 rect（矩形）、circle（圆形）、poly（多边形）或 default（默认，覆盖整个图像）。
• coords：定义区域的坐标，具体格式取决于 shape 的值。
• href：定义点击区域后跳转的链接。
• alt：为区域提供替代文本，用于无障碍访问。

<area> 标签的属性详解

shape 属性

shape 属性决定了 <area> 的形状，支持以下值：

1. rect（矩形）
   使用四个坐标值：x1,y1,x2,y2，分别表示左上角和右下角的坐标。
   示例：

   <area shape="rect" coords="10,10,100,100" href="page1.html" alt="矩形区域">
   

2. circle（圆形）
   使用三个坐标值：x,y,radius，分别表示圆心坐标和半径。
   示例：

   <area shape="circle" coords="150,150,50" href="page2.html" alt="圆形区域">
   

3. poly（多边形）
   使用至少六个坐标值：x1,y1,x2,y2,...,xn,yn，表示多边形的各个顶点。
   示例：

   <area shape="poly" coords="200,10,250,50,200,90,150,50" href="page3.html" alt="多边形区域">
   

4. default（默认）
   覆盖图像中未被其他 <area> 定义的区域。不需要 coords 属性。
   示例：

   <area shape="default" href="default.html" alt="默认区域">
   

coords 属性

coords 属性的格式完全依赖于 shape 的值：

• rect：x1,y1,x2,y2
  例如：coords="10,10,100,100" 表示从 (10,10) 到 (100,100) 的矩形。
• circle：x,y,radius
  例如：coords="150,150,50" 表示圆心在 (150,150)，半径为 50 的圆。
• poly：x1,y1,x2,y2,...,xn,yn
  例如：coords="200,10,250,50,200,90,150,50" 表示一个菱形的四个顶点。

href 和 alt 属性

• href：定义点击区域后跳转的 URL。可以是绝对路径或相对路径。
  示例：href="https://example.com" 或 href="about.html"。
• alt：为区域提供替代文本，当图像无法加载或用户使用屏幕阅读器时会显示该文本。
  示例：alt="点击进入关于页面"。

<area> 标签的实际应用

示例 1：创建图像地图

以下是一个完整的图像地图示例，包含矩形、圆形和多边形区域：

<img src="example.jpg" alt="示例图像" usemap="#exampleMap">
<map name="exampleMap">
  <area shape="rect" coords="10,10,100,100" href="rect.html" alt="矩形区域">
  <area shape="circle" coords="150,150,50" href="circle.html" alt="圆形区域">
  <area shape="poly" coords="200,10,250,50,200,90,150,50" href="poly.html" alt="多边形区域">
  <area shape="default" href="default.html" alt="默认区域">
</map>

示例 2：结合 CSS 增强交互效果

可以通过 CSS 为 <area> 标签添加悬停效果。虽然 <area> 本身不支持直接样式化，但可以通过 JavaScript 或 CSS 的 :hover 伪类间接实现：

<style>
  img {
    border: none;
  }
  /* 通过 JavaScript 或 CSS 伪类模拟悬停效果 */
</style>
<img src="worldmap.jpg" alt="世界地图" usemap="#worldMap">
<map name="worldMap">
  <area shape="rect" coords="100,50,200,150" href="europe.html" alt="欧洲" class="region">
  <area shape="rect" coords="300,100,400,200" href="asia.html" alt="亚洲" class="region">
</map>

示例 3：动态生成 <area> 标签

通过 JavaScript 动态生成 <area> 标签：

<img src="dynamic.jpg" alt="动态图像" usemap="#dynamicMap">
<map name="dynamicMap" id="dynamicMap"></map>
<script>
  const map = document.getElementById('dynamicMap');
  const areas = [
    { shape: 'rect', coords: '10,10,100,100', href: 'area1.html', alt: '区域1' },
    { shape: 'circle', coords: '150,150,50', href: 'area2.html', alt: '区域2' }
  ];
  
  areas.forEach(area => {
    const areaElement = document.createElement('area');
    areaElement.shape = area.shape;
    areaElement.coords = area.coords;
    areaElement.href = area.href;
    areaElement.alt = area.alt;
    map.appendChild(areaElement);
  });
</script>

<area> 标签的注意事项

1. 坐标原点：图像的左上角是 (0,0)，向右为 x 轴正方向，向下为 y 轴正方向。
2. 无障碍性：务必为每个 <area> 提供 alt 属性，以确保屏幕阅读器用户可以理解区域的作用。
3. 响应式设计：<area> 的坐标是固定的，不随图像大小变化。如果需要响应式支持，可以通过 JavaScript 动态计算坐标。
4. 浏览器兼容性：所有现代浏览器均支持 <area> 标签，但在移动设备上可能需要额外处理触摸事件。

<area> 标签的高级用法

结合 Canvas 实现动态图像映射

可以通过 Canvas 绘制图像并动态计算 <area> 的坐标：

<canvas id="myCanvas" width="500" height="300"></canvas>
<map name="canvasMap">
  <area shape="rect" coords="0,0,100,100" href="part1.html" alt="部分1">
</map>
<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = 'red';
  ctx.fillRect(10, 10, 100, 100);
  
  // 动态更新 <area> 坐标
  const area = document.querySelector('area');
  area.coords = '10,10,110,110';
</script>

使用 SVG 替代 <area>

对于复杂的图像映射，SVG 可能是更好的选择，因为它支持更灵活的路径和样式：

<svg width="500" height="300" viewBox="0 0 500 300">
  <a xlink:href="part1.html">
    <rect x="10" y="10" width="100" height="100" fill="red" />
  </a>
  <a xlink:href="part2.html">
    <circle cx="200" cy="100" r="50" fill="blue" />
  </a>
</svg>