什么是热区链接？
热区链接,也叫图像映射，是在一张图片上定义一个或多个可点击的“热点”区域，当用户点击这些区域时，浏览器会根据预设的链接跳转到相应的网页。
（图片来源网络，侵删）
常见应用场景：
- 网站导航图： 比如一张公司大楼的平面图，点击不同的部门（如市场部、研发部）可以跳转到对应的介绍页面。
- 产品展示图： 一张手机产品图，点击摄像头可以跳转到摄像头详情页，点击屏幕可以跳转到屏幕技术介绍页。
- 信息图表： 一张复杂的信息图表，点击不同的数据模块可以查看详细数据。
- 地图导航： 一张世界地图或中国地图，点击不同的省份可以跳转到该省的旅游信息页。
建立热区链接的两种主要方法
主要有两种方法可以实现热区链接：使用 HTML 的 <map> 和 <area> 标签（传统方法），以及 使用现代 CSS 和 JavaScript（更灵活的方法）。
使用 HTML <map> 和 <area> 标签（最常用、最标准）
这是专门为图像映射设计的 HTML 标准方法，兼容性非常好，也是搜索引擎相对能理解的方式。
核心概念
<img> 插入你的图片。<map> 定义一个“地图”区域，并给它一个唯一的name或id。<area> 在<map>标签内部，定义一个或多个可点击的“热点”区域。- 关联： 通过
<img>标签的usemap属性，将图片与对应的<map>关联起来。
详细步骤与代码示例
假设我们有一张 sitemap.png 的图片，我们想在上面创建三个热区：
（图片来源网络，侵删）
- 左上角的“首页”链接到
index.html - 右上角的“关于我们”链接到
about.html - 底部的“联系方式”链接到
contact.html
步骤 1：准备图片并确定坐标
这是最关键的一步,你需要知道每个热区区域的精确坐标，坐标格式是 x, y，表示区域左上角的像素位置。
- 如何获取坐标？
- 推荐工具： 使用专门的图像热区编辑器，如 Image Map Editor，你只需上传图片，用鼠标在图片上框选区域，工具会自动计算出坐标。
- 手动估算： 如果你的区域是规则的（矩形、圆形），可以通过图像编辑软件（如 Photoshop、GIMP）查看鼠标位置来估算。
步骤 2：编写 HTML 代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">热区链接示例</title>
<style>
body { font-family: sans-serif; text-align: center; }
img { max-width: 100%; height: auto; border: 1px solid #ccc; }
</style>
</head>
<body>
<h1>网站导航图</h1>
<!--
1. <img> 标签的 usemap 属性值为 "#地图名称"。
注意： "#" + map 标签的 name 或 id 属性值。
-->
<img src="sitemap.png" alt="网站导航图" usemap="#siteNavigationMap">
<!--
2. <map> 标签定义了一个图像地图。
name 属性用于与 <img> 的 usemap 关联。
-->
<map name="siteNavigationMap">
<!--
3. <area> 标签定义一个可点击区域。
shape: 区域形状 ("rect", "circle", "poly", "default")
coords: 坐标值
href: 链接地址
alt: 链接的替代文本（非常重要，可访问性！）
-->
<!-- 矩形区域：首页 (x1, y1, x2, y2) -->
<area shape="rect" coords="20, 30, 150, 100" href="index.html" alt="链接到首页">
<!-- 矩形区域：关于我们 -->
<area shape="rect" coords="200, 30, 330, 100" href="about.html" alt="链接到关于我们页面">
<!-- 多边形区域：联系方式 (需要多个点 x1,y1,x2,y2,...) -->
<area shape="poly" coords="50, 150, 100, 200, 150, 150, 100, 180" href="contact.html" alt="链接到联系方式页面">
</map>
<p>点击图片上的不同区域进行导航。</p>
</body>
</html>
<area> 标签的重要属性
| 属性 | 值 | 描述 |
|---|---|---|
shape |
rect, circle, poly, default |
定义热区的形状。 |
coords |
坐标值 | 定义热区的位置和尺寸。 |
href |
URL | 定义热区链接到的地址。 |
alt |
文本 | 非常重要！ 定义热区的替代文本，用于屏幕阅读器，提高可访问性。 |
target |
_blank, _self, _parent, _top |
定义在何处打开链接（新标签页、当前页等）。 |
coords 属性详解
shape="rect"(矩形):- 格式：
coords="x1, y1, x2, y2" (x1, y1)是矩形左上角的坐标。(x2, y2)是矩形右下角的坐标。
- 格式：
shape="circle"(圆形):- 格式：
coords="center_x, center_y, radius" (center_x, center_y)是圆心的坐标。radius是圆的半径（像素）。
- 格式：
shape="poly"(多边形):- 格式：
coords="x1, y1, x2, y2, x3, y3, ..." - 需要按顺序列出多边形每个顶点的坐标,至少需要 3 个点（一个三角形）。
- 格式：
使用 CSS 和 JavaScript（更现代、更灵活）
这种方法不使用 <map> 和 <area>，而是通过 CSS 定位一个或多个覆盖在图片上的 <a> 链接元素，这种方法在处理复杂或不规则形状时非常强大。
核心概念
- 容器： 一个
position: relative的<div>包裹着图片。 - 链接： 多个
position: absolute的<a>标签作为“热区”层叠在图片上。 - 定位： 使用
top,left,width,height等 CSS 属性来精确定位每个热区。
详细步骤与代码示例
我们使用和上面一样的例子。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">CSS/JS 热区链接示例</title>
<style>
body { font-family: sans-serif; text-align: center; }
/* 1. 容器：设置为相对定位，作为子元素的定位基准 */
.image-container {
position: relative;
display: inline-block; /* 让容器大小适应图片 */
border: 1px solid #ccc;
}
/* 2. 图片：设置最大宽度，高度自动 */
.image-container img {
max-width: 100%;
height: auto;
display: block; /* 移除图片底部间隙 */
}
/* 3. 热区链接：绝对定位，覆盖在图片上 */
.hotspot {
position: absolute;
border: 2px dashed red; /* 用虚线框显示热区位置，发布时移除 */
background-color: rgba(255, 0, 0, 0.1); /* 半透明红色背景，发布时移除 */
text-decoration: none;
color: white;
padding: 5px;
font-size: 12px;
}
/* 定义各个热区的具体位置和大小 */
#home-link {
top: 30px;
left: 20px;
width: 130px; /* 150 - 20 */
height: 70px; /* 100 - 30 */
}
#about-link {
top: 30px;
left: 200px;
width: 130px; /* 330 - 200 */
height: 70px; /* 100 - 30 */
}
#contact-link {
/* 对于不规则形状，可以用一个足够大的矩形来近似 */
top: 150px;
left: 50px;
width: 100px;
height: 50px;
}
</style>
</head>
<body>
<h1>网站导航图 (CSS/JS 方法)</h1>
<!--
容器 div，用于包裹图片和所有热区链接
-->
<div class="image-container">
<img src="sitemap.png" alt="网站导航图">
<!-- 热区链接 1: 首页 -->
<a href="index.html" class="hotspot" id="home-link" alt="链接到首页">首页</a>
<!-- 热区链接 2: 关于我们 -->
<a href="about.html" class="hotspot" id="about-link" alt="链接到关于我们页面">关于我们</a>
<!-- 热区链接 3: 联系方式 -->
<a href="contact.html" class="hotspot" id="contact-link" alt="链接到联系方式页面">联系方式</a>
</div>
<p>点击图片上的不同区域进行导航。</p>
</body>
</html>
两种方法的优缺点对比
| 特性 | HTML <map> / <area> 方法 |
CSS / JavaScript 方法 |
|---|---|---|
| 兼容性 | 非常好，支持所有浏览器。 | 非常好，现代浏览器支持完美。 |
| 可访问性 | 优秀。<area> 的 alt 属性被屏幕阅读器很好地支持。 |
一般，需要额外努力（如 ARIA 标签）才能达到与 <map> 同等水平的可访问性。 |
| SEO | 较好，搜索引擎能更好地理解图片上的结构化链接。 | 较差，搜索引擎可能无法正确识别这些通过 CSS 定位的链接。 |
| 实现复杂度 | 简单，对于标准形状（矩形、圆形）非常直接。 | 稍复杂，需要手动计算和设置每个热区的 top, left, width, height。 |
| 灵活性 | 有限，难以实现非常不规则的、非多边形的形状。 | 极高，可以实现任何形状，甚至可以结合 SVG 或 Canvas 创建极其复杂的交互。 |
| 响应式设计 | 有挑战，图片缩放时，热区坐标不会自动调整，需要 JavaScript 或 vw/vh 单位配合。 |
非常容易，可以使用百分比或 vw/vh 等相对单位，使热区随图片自适应缩放。 |
如何选择？
-
选择
<map>/<area>方法，- 你需要最佳的可访问性和 SEO 表现。
- 你的热区形状是标准的矩形、圆形或多边形。
- 项目要求兼容非常老的浏览器。
- 这是一个相对静态的导航图,不需要复杂的响应式处理。
-
选择 CSS / JavaScript 方法，
- 你需要实现非常不规则的、动态的或复杂的交互效果。
- 你对响应式设计有极高的要求,希望热区能完美适配各种屏幕尺寸。
- 你不担心 SEO 和可访问性（或者你有能力通过额外手段解决它们）。
- 你正在使用现代前端框架（如 React, Vue），这种 DOM 操作方式更符合组件化思想。
对于大多数常规网站导航图,使用 HTML <map> 和 <area> 标签是首选，因为它简单、标准且对 SEO 和可访问性友好，只有当你需要更高的灵活性和响应式能力，并且愿意在 SEO 和可访问性上做一些权衡时，才考虑使用 CSS 和 JavaScript 的方法。
