map和area标签有什么用？图片热点区域怎么定义？-html教程-PHP中文网

map和area标签有什么用？图片热点区域怎么定义？

煙雲

发布： 2025-08-17 19:03:01

原创

871人浏览过

图片热点区域通过使用<map>和<area>标签定义，1. 使用<img>标签的usemap属性关联<map>标签；2. 在<map>中使用多个<area>标签定义可点击区域，shape属性设置形状（rect、circle、poly），coords属性设置相对于图片左上角的像素坐标；3. 为实现响应式布局，可引入jquery rwdimagemaps库，在页面加载后动态调整coords坐标以适配图片缩放；4. 替代方案包括使用svg矢量图形、css object-fit结合javascript计算坐标或css shapes技术，根据项目需求选择合适方案；该方法兼容性良好，适用于所有现代浏览器。

map和area标签有什么用？图片热点区域怎么定义？

Map 和 Area 标签主要用于在 HTML 图片上创建可点击的热点区域。简单来说，就是让图片的不同部分可以链接到不同的网址，就像给图片的不同区域添加了链接一样。

解决方案：

Map 和 Area 标签配合使用，定义图片上的可点击区域。

<map>

登录后复制

标签定义一个图像映射，而

<area>

登录后复制

标签则定义映射中的可点击区域。

首先，你需要一个图片。假设我们有一张名为 "my_image.jpg" 的图片。

<img src="my_image.jpg" alt="图片" usemap="#my_map">

<map name="my_map">
  <area shape="rect" coords="0,0,50,50" href="page1.html" alt="区域1">
  <area shape="circle" coords="100,100,25" href="page2.html" alt="区域2">
  <area shape="poly" coords="150,50,200,100,150,150" href="page3.html" alt="区域3">
</map>

登录后复制

```
<img>
```
登录后复制
标签的
```
usemap
```
登录后复制
属性指向
```
<map>
```
登录后复制
标签的
```
name
```
登录后复制
属性，将图片和映射关联起来。注意
```
usemap
```
登录后复制
前面要加
```
#
```
登录后复制
。
```
<area>
```
登录后复制
标签的
```
shape
```
登录后复制
属性定义了区域的形状，常见的有
```
rect
```
登录后复制
(矩形),
```
circle
```
登录后复制
(圆形), 和
```
poly
```
登录后复制
(多边形)。
```
coords
```
登录后复制
属性定义了区域的坐标。矩形是左上角和右下角的坐标，圆形是圆心坐标和半径，多边形是各个顶点的坐标。坐标值是相对于图片左上角的像素值。
```
href
```
登录后复制
属性定义了点击区域后跳转的 URL。
```
alt
```
登录后复制
属性是区域的替代文本，用于SEO和无障碍访问。

图片热点区域怎么定义？

图片热点区域的定义，本质上就是确定

<area>

登录后复制

标签中的

shape

登录后复制

和

coords

登录后复制

属性。

矩形 (rect): 确定矩形左上角和右下角的 x, y 坐标。
```
coords="x1,y1,x2,y2"
```
登录后复制
圆形 (circle): 确定圆心的 x, y 坐标以及半径。
```
coords="x,y,radius"
```
登录后复制
多边形 (poly): 确定多边形每个顶点的 x, y 坐标。
```
coords="x1,y1,x2,y2,x3,y3,..."
```
登录后复制

一开始，确定这些坐标可能比较麻烦。你可以使用一些在线工具来辅助生成

<map>

登录后复制

和

<area>

登录后复制

标签。比如，你可以搜索 "image map generator" 找到很多免费的工具。

使用在线工具的流程大致是：上传图片 -> 在图片上绘制热点区域 -> 工具自动生成 HTML 代码。

Map 和 Area 标签的兼容性怎么样？

Map 和 Area 标签的兼容性非常好，几乎所有现代浏览器都支持它们。你不需要担心兼容性问题。不过，在一些老旧的浏览器上，可能会有一些小的显示差异，但功能基本上都能正常使用。

稿定AI社区

在线AI创意灵感社区

查看详情

如何在响应式布局中使用 Map 和 Area 标签？

响应式布局下，图片会随着屏幕尺寸的变化而缩放。如果直接使用像素坐标定义热点区域，会导致热点区域的位置和大小不正确。

解决这个问题，可以使用一些 JavaScript 库，比如 jQuery rwdImageMaps。

这个库的原理是：在页面加载完成后，根据图片的实际尺寸，动态调整

<area>

登录后复制

标签的

coords

登录后复制

属性。

使用方法很简单：

引入 jQuery 和 rwdImageMaps 库。
在
```
<img>
```
登录后复制
标签上添加
```
usemap
```
登录后复制
属性。
调用
```
$('img[usemap]').rwdImageMaps();
```
登录后复制

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="jquery.rwdImageMaps.min.js"></script>

<img src="my_image.jpg" alt="图片" usemap="#my_map" style="width: 100%;">

<map name="my_map">
  <area shape="rect" coords="0,0,50,50" href="page1.html" alt="区域1">
  <area shape="circle" coords="100,100,25" href="page2.html" alt="区域2">
  <area shape="poly" coords="150,50,200,100,150,150" href="page3.html" alt="区域3">
</map>

<script>
  $(document).ready(function() {
    $('img[usemap]').rwdImageMaps();
  });
</script>

登录后复制

注意：

<img>

登录后复制

标签需要设置

width: 100%;

登录后复制

才能实现响应式缩放。

除了 jQuery rwdImageMaps，还有其他的解决方案吗？

当然，除了 jQuery rwdImageMaps，还有一些其他的解决方案：

CSS
object-fit
登录后复制
属性：
```
object-fit: contain;
```
登录后复制
可以让图片在保持宽高比的前提下缩放，直到完全适应容器。结合 JavaScript 动态计算坐标，可以实现响应式热点区域。
SVG： 使用 SVG 替代
```
<img>
```
登录后复制
标签。SVG 本身就是矢量图形，可以很好地适应不同屏幕尺寸。在 SVG 中使用
```
<a xlink:href="url">
```
登录后复制
标签来创建链接区域。
CSS Shapes： CSS Shapes 可以创建复杂的形状，结合 JavaScript 动态定位，可以实现更灵活的热点区域。