HTML图像映射怎么做？可点击区域的5种area标签用法-html教程-PHP中文网

要创建html图像映射，核心步骤是：1. 使用<img>标签并添加usemap属性指向一个<map>标签；2. 在<map>标签内使用多个<area>标签定义可点击区域。每个<area>通过shape和coords属性指定形状与坐标，href属性设置链接。常见形状包括矩形（rect）、圆形（circle）、多边形（poly）以及默认区域（default），分别适用于不同几何形状的交互需求。此外，还可结合javascript实现无跳转交互或动态功能。响应式设计中，传统图像映射存在固定坐标缩放错位问题，可通过javascript库（如imagemapster、rwd image maps）动态调整coords值来解决，或改用svg方案提升兼容性。

HTML图像映射怎么做？可点击区域的5种area标签用法

要说HTML图像映射怎么做，其实核心就是两步：一张图片，然后一个地图（<map>标签）来定义图片上哪些区域是可点击的。具体操作就是给<img>标签加个usemap属性，指向你定义的那个<map>的name。而在<map>里面，就用<area>标签来定义一个个具体的、可点击的区域，每个<area>标签都会有shape（形状）和coords（坐标）来划定范围，再配上href属性指定点击后跳转到哪里。

解决方案

创建HTML图像映射，你需要一个<img>标签和一个<map>标签。<img>标签通过usemap属性关联到<map>标签的name。在<map>标签内部，使用<area>标签来定义图像上的可点击区域。

基本结构示例：

立即学习“前端免费学习笔记（深入）”；

<img src="my_image.jpg" alt="我的交互图" usemap="#imagemap_example">

<map name="imagemap_example">
  <!-- 可点击区域将在这里定义 -->
  <area shape="rect" coords="0,0,100,50" href="link1.html" alt="区域一">
  <area shape="circle" coords="150,75,25" href="link2.html" alt="区域二">
  <area shape="poly" coords="200,10,250,10,225,60" href="link3.html" alt="区域三">
  <area shape="default" href="default.html" alt="其他区域">
</map>

登录后复制

area标签的五种常见用法（基于shape属性及其延伸）：

矩形区域 (shape="rect")
- 用途： 定义一个矩形的可点击区域。
- coords格式： x1,y1,x2,y2。分别代表矩形左上角的X、Y坐标和右下角的X、Y坐标。
- 示例： <area shape="rect" coords="0,0,100,50" href="rectangle.html" alt="点击这里去矩形页">
- 我个人觉得，这是最直观、最容易定义的形状，适合那些规规整整的按钮区域。
圆形区域 (shape="circle")
- 用途： 定义一个圆形的可点击区域。
- coords格式： cx,cy,r。分别代表圆心的X、Y坐标和圆的半径。
- 示例： <area shape="circle" coords="150,75,25" href="circle.html" alt="点击这里去圆形页">
- 画圆比画矩形稍微多考虑一个半径，但用起来也挺顺手，比如地图上的城市标记。
多边形区域 (shape="poly")
- 用途： 定义一个任意多边形的可点击区域。
- coords格式： x1,y1,x2,y2,...,xn,yn。按顺序定义多边形每个顶点的X、Y坐标。最后一个点会自动与第一个点连接，形成闭合区域。
- 示例： <area shape="poly" coords="200,10,250,10,225,60" href="polygon.html" alt="点击这里去多边形页">
- 这个就比较灵活了，适合不规则的形状。但说实话，手动计算这些顶点坐标是个体力活，通常得借助图像编辑软件来辅助。
默认区域 (shape="default")
- 用途： 定义一个“包罗万象”的可点击区域，它会覆盖图像中所有未被其他<area>标签定义的区域。
- coords格式： 无需coords属性。
- 示例： <area shape="default" href="default_page.html" alt="点击其他地方">
- 这个用起来很方便，相当于一个“兜底”的选项，避免用户点击空白区域没有响应。通常放在<map>标签的最后。
无链接交互区域 (nohref 或 href="#" 与 JavaScript 结合)
- 用途： 定义一个可点击但不会跳转页面的区域，主要用于触发JavaScript事件，实现更复杂的交互。
- nohref属性： 当<area>标签包含nohref属性时，它将不会作为超链接跳转，但仍然可以响应JavaScript事件（例如onclick）。
- href="#"： 另一种常见做法是设置href="#"，然后通过JavaScript的event.preventDefault()阻止默认跳转行为。
- 示例： <area shape="rect" coords="300,0,400,50" href="#" onclick="alert('你点击了一个交互区域！'); return false;" alt="交互区域">
- 这种用法让图像映射不仅仅是简单的链接跳转，而是能承载更多动态功能，比如显示提示信息、展开子菜单等。

图像映射的实际应用场景

图像映射这东西，听起来有点老派，但它在某些特定场景下确实有其独到之处。我个人觉得，它最适合那些需要在一个固定背景图上，划分出多个互不重叠且形状各异的交互区域的场景。

比如，你可能见过：

交互式地图： 在一张国家或地区地图上，点击不同的省份或城市区域，可以跳转到该区域的详细介绍页面。这比用多张小图片拼接要省事得多。
人体解剖图： 医疗或教育网站上，一张人体骨骼或器官图，点击不同部位能显示对应的名称和描述。
产品部件图： 某个复杂设备的爆炸图，点击特定部件就能看到其编号、名称或详细参数。
老式网站导航： 以前很多网站的导航条就是一张大图，上面用图像映射定义了各个菜单项的点击区域。虽然现在CSS和JavaScript能做得更灵活，但在一些静态内容展示上，它依然简洁高效。

什么时候我会考虑用它呢？当内容确实是“图文并茂”，而且图是核心，文字是辅助，并且这些可点击区域在图片上是固定的、不怎么变化的。如果内容结构非常动态，或者需要响应式布局时，我可能会优先考虑SVG或者纯CSS/JS的方案，因为图像映射在响应式方面确实有点“硬伤”。

图像转图像AI

利用AI轻松变形、风格化和重绘任何图像

查看详情

`area`标签的形状与坐标怎么定？

定义area标签的形状主要靠shape属性，而coords属性则是指定这个形状在图片上的具体位置和大小。理解这个坐标系统很重要：图片的左上角是0,0，X轴向右递增，Y轴向下递增。

矩形 (shape="rect")
- coords="x1,y1,x2,y2"：x1,y1是矩形左上角的坐标，x2,y2是矩形右下角的坐标。想象一下你在图片上画一个框，从左上角开始拖动到右下角，就是这个意思。
- 举个例子，如果你的图片是400x300像素，你想在图片左上角定义一个100x50像素的矩形区域，那么coords就是0,0,100,50。
圆形 (shape="circle")
- coords="cx,cy,r"：cx,cy是圆心的坐标，r是圆的半径。
- 如果你想在图片中心画一个半径为50像素的圆，图片是400x300，那么圆心大概在200,150，所以coords就是200,150,50。
多边形 (shape="poly")
- coords="x1,y1,x2,y2,...,xn,yn"：你需要列出多边形每个顶点的坐标，按顺序连接。浏览器会自动将最后一个点和第一个点连接起来，形成一个闭合的多边形。
- 比如一个三角形，coords="10,10,50,10,30,50"。这会画一个顶部在30,50，底部两个角在10,10和50,10的三角形。
- 我个人觉得，手动计算这些多边形的坐标是件挺考验耐心的事儿，特别是当多边形复杂的时候。所以通常我会借助一些图像编辑工具，比如Photoshop、GIMP，或者一些在线的图像映射生成器。这些工具通常可以让你直接在图片上框选区域，然后自动生成对应的coords值，大大提高了效率。

图像映射的响应式挑战和解决方案

图像映射在现代网页设计中，最大的一个“老大难”问题就是响应式。你想想看，coords里定义的都是固定的像素值，当你的图片在不同设备上缩放时，这些固定坐标对应的可点击区域就不会跟着图片一起缩放，结果就是点击区域错位，用户体验极差。纯HTML/CSS几乎搞不定这个。

挑战： 当图片通过width: 100%; height: auto;等CSS属性进行响应式缩放时，area标签的coords值仍然保持不变，导致可点击区域与缩放后的图片内容不匹配。

解决方案：

JavaScript 库（推荐且常用） 这是目前解决图像映射响应式问题最主流的方法。有一些成熟的JavaScript库，它们的工作原理大致是：

获取原始图片的尺寸和当前图片的实际渲染尺寸。
计算出图片缩放的比例。
根据这个比例，动态地调整所有<area>标签的coords属性值。
例如： 像ImageMapster或RWD Image Maps这样的库。你只需要引入它们，然后调用一个简单的初始化函数，它们就会自动处理图片的缩放和area坐标的调整。

核心思路（伪代码）：

function adjustImageMapCoords() {
    const img = document.querySelector('img[usemap]');
    if (!img) return;

    const map = document.querySelector(`map[name="${img.usemap.substring(1)}"]`);
    if (!map) return;

    // 获取原始图片尺寸（可能需要预设或通过JS加载后获取）
    const originalWidth = img.naturalWidth; // 或其他方式获取原始宽度
    const currentWidth = img.offsetWidth;

    const scale = currentWidth / originalWidth;

    map.querySelectorAll('area').forEach(area => {
        const originalCoords = area.dataset.originalCoords || area.coords; // 存储原始坐标
        area.dataset.originalCoords = originalCoords; // 第一次运行时保存原始坐标

        const coordsArray = originalCoords.split(',').map(Number);
        const newCoordsArray = coordsArray.map(coord => Math.round(coord * scale));
        area.coords = newCoordsArray.join(',');
    });
}

// 在图片加载完成和窗口大小改变时调用
window.addEventListener('load', adjustImageMapCoords);
window.addEventListener('resize', adjustImageMapCoords);

登录后复制

这种方法相对简单高效，是目前在保留图像映射结构的前提下，实现响应式的最佳实践。

SVG + JavaScript（更现代，但更复杂） 如果你对灵活性要求更高，或者图像本身就是矢量图，那么使用SVG（可缩放矢量图形）来替代传统的<img>和area标签可能是更好的选择。
- 思路： 将图像内容直接嵌入到SVG中，然后用SVG的<polygon>, <circle>, <rect>等元素来定义可点击区域。
- 优点： SVG本身就是矢量图形，天生支持缩放而不会失真，其内部的元素也能随之缩放。你可以直接给SVG元素添加事件监听器。
- 缺点： 制作SVG交互图比简单的图像映射要复杂得多，需要更多的SVG和JavaScript知识。如果你的原始图片是位图（JPG/PNG），那么你需要将其转换为SVG或者将其嵌入到SVG中，并用SVG元素在其上方绘制可点击区域。