编辑“︁HTML图像映射”︁（章节）

= HTML图像映射 =

'''HTML图像映射'''（Image Map）是一种允许在单个图像上定义多个可点击区域（称为“热点”）的技术。每个热点可以链接到不同的URL或执行不同的JavaScript操作。这种技术常用于交互式图表、导航菜单或带有多个可操作区域的复杂图像。

== 基本概念 ==

图像映射分为两种类型：
* '''客户端图像映射'''：由浏览器直接处理，使用{{code|lang=html|<map>}}和{{code|lang=html|<area>}}标签实现。
* '''服务器端图像映射'''：依赖服务器处理点击坐标，现已较少使用。

本文重点介绍'''客户端图像映射'''，因其更高效且不依赖服务器。

== 语法结构 ==

图像映射需要两个核心元素：
1. {{code|lang=html|<img>}}标签的{{code|lang=html|usemap}}属性关联映射。
2. {{code|lang=html|<map>}}标签定义热点区域，内部包含多个{{code|lang=html|<area>}}标签。

基本代码框架：
<syntaxhighlight lang="html">
<img src="image.jpg" alt="示例图像" usemap="#exampleMap">
<map name="exampleMap">
  <area shape="rect" coords="x1,y1,x2,y2" href="url1.html" alt="区域1">
  <area shape="circle" coords="x,y,radius" href="url2.html" alt="区域2">
  <area shape="poly" coords="x1,y1,x2,y2,...,xn,yn" href="url3.html" alt="区域3">
</map>
</syntaxhighlight>

== 区域形状详解 ==

=== 矩形（rect） ===
* 语法：{{code|lang=html|shape="rect" coords="x1,y1,x2,y2"}}
* 定义：左上角(x1,y1)到右下角(x2,y2)的矩形
* 示例：
<syntaxhighlight lang="html">
<area shape="rect" coords="34,44,270,350" href="page.html" alt="矩形区域">
</syntaxhighlight>

=== 圆形（circle） ===
* 语法：{{code|lang=html|shape="circle" coords="x,y,radius"}}
* 定义：圆心(x,y)和半径(radius)
* 示例：
<syntaxhighlight lang="html">
<area shape="circle" coords="100,100,50" href="page.html" alt="圆形区域">
</syntaxhighlight>

=== 多边形（poly） ===
* 语法：{{code|lang=html|shape="poly" coords="x1,y1,x2,y2,...,xn,yn"}}
* 定义：连接各点的多边形
* 示例（三角形）：
<syntaxhighlight lang="html">
<area shape="poly" coords="200,10,250,190,160,210" href="page.html" alt="三角形区域">
</syntaxhighlight>

== 坐标系统 ==

坐标以图像左上角为原点(0,0)，向右为x轴正方向，向下为y轴正方向。单位是像素。

<mermaid>
graph LR
    A[0,0 图像左上角] --> B[x+向右]
    A --> C[y+向下]
</mermaid>

== 实际案例 ==

=== 案例1：交互式世界地图 ===
点击不同国家跳转到对应介绍页面：
<syntaxhighlight lang="html">
<img src="worldmap.png" alt="世界地图" usemap="#worldMap">
<map name="worldMap">
  <area shape="poly" coords="100,50,120,60,110,80,90,70" href="france.html" alt="法国">
  <area shape="poly" coords="200,30,220,40,210,60,190,50" href="germany.html" alt="德国">
  <!-- 更多国家区域 -->
</map>
</syntaxhighlight>

=== 案例2：产品展示图 ===
点击产品不同部件显示详细信息：
<syntaxhighlight lang="html">
<img src="smartphone.png" alt="智能手机" usemap="#phoneMap">
<map name="phoneMap">
  <area shape="circle" coords="150,80,20" href="#screen" alt="屏幕">
  <area shape="rect" coords="50,200,100,220" href="#battery" alt="电池">
  <area shape="poly" coords="180,200,190,210,170,215" href="#camera" alt="摄像头">
</map>
</syntaxhighlight>

== 高级技巧 ==

=== 结合CSS ===
可以通过CSS为热点区域添加悬停效果：
<syntaxhighlight lang="css">
area:hover {
  outline: 2px solid red;
}
</syntaxhighlight>

=== JavaScript交互 ===
使用{{code|lang=javascript|onclick}}事件处理复杂交互：
<syntaxhighlight lang="html">
<area shape="rect" coords="10,10,100,100" onclick="showInfo('productA')">
</syntaxhighlight>

=== 响应式图像映射 ===
对于响应式设计，需要使用JavaScript动态调整坐标：
<syntaxhighlight lang="javascript">
window.addEventListener('resize', function() {
  // 根据图像当前尺寸比例调整坐标
});
</syntaxhighlight>

== 数学基础 ==

计算多边形面积（用于高级验证）：
<math>
A = \frac{1}{2} \left| \sum_{i=1}^{n} (x_i y_{i+1} - x_{i+1} y_i) \right|
</math>
其中<math>x_{n+1} = x_1</math>且<math>y_{n+1} = y_1</math>

== 最佳实践 ==

1. 始终提供{{code|lang=html|alt}}文本以提高可访问性
2. 对于复杂形状，使用工具生成坐标
3. 在移动设备上测试触摸交互
4. 避免创建过小的热点区域（至少44×44像素）

== 浏览器支持 ==

所有现代浏览器都支持客户端图像映射，包括：
* Chrome 1+
* Firefox 1+
* Safari 1+
* Edge 12+
* Opera 7+

== 工具推荐 ==

1. '''在线图像映射生成器'''：帮助可视化创建热点区域
2. '''Photoshop/Figma'''：获取精确坐标
3. '''浏览器开发者工具'''：调试现有图像映射

== 常见问题 ==

'''Q：如何找到图像的精确坐标？'''
A：可以使用图像编辑软件或在线工具，大多数工具会显示鼠标位置的坐标。

'''Q：图像映射在移动设备上是否有效？'''
A：是的，但需要确保热点区域足够大以便触摸操作。

'''Q：能否在SVG图像上使用图像映射？'''
A：不需要，SVG本身支持更强大的交互功能，可以直接在SVG元素上添加事件。

[[Category:编程语言]]
[[Category:HTML]]
[[Category:HTML图像与多媒体]]