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

要创建html图像映射，核心步骤是：1. 使用标签并添加usemap属性指向一个

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

解决方案

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

基本结构示例：

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

@@##@@

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

1. 矩形区域 (shape="rect")

   
   • 用途： 定义一个矩形的可点击区域。
   • coords格式： x1,y1,x2,y2。分别代表矩形左上角的X、Y坐标和右下角的X、Y坐标。
   • 示例：
   • 我个人觉得，这是最直观、最容易定义的形状，适合那些规规整整的按钮区域。

2. 圆形区域 (shape="circle")

   • 用途： 定义一个圆形的可点击区域。
   • coords格式： cx,cy,r。分别代表圆心的X、Y坐标和圆的半径。
   • 示例：
   • 画圆比画矩形稍微多考虑一个半径，但用起来也挺顺手，比如地图上的城市标记。

3. 多边形区域 (shape="poly")

   • 用途： 定义一个任意多边形的可点击区域。
   • coords格式： x1,y1,x2,y2,...,xn,yn。按顺序定义多边形每个顶点的X、Y坐标。最后一个点会自动与第一个点连接，形成闭合区域。
   • 示例：
   • 这个就比较灵活了，适合不规则的形状。但说实话，手动计算这些顶点坐标是个体力活，通常得借助图像编辑软件来辅助。

4. 默认区域 (shape="default")

   • 用途： 定义一个“包罗万象”的可点击区域，它会覆盖图像中所有未被其他标签定义的区域。
   • coords格式： 无需coords属性。
   • 示例：
   • 这个用起来很方便，相当于一个“兜底”的选项，避免用户点击空白区域没有响应。通常放在标签的最后。

5. 无链接交互区域 (nohref 或 href="#" 与 JavaScript 结合)

   • 用途： 定义一个可点击但不会跳转页面的区域，主要用于触发JavaScript事件，实现更复杂的交互。
   • nohref属性： 当标签包含nohref属性时，它将不会作为超链接跳转，但仍然可以响应JavaScript事件（例如onclick）。
   • href="#"： 另一种常见做法是设置href="#"，然后通过JavaScript的event.preventDefault()阻止默认跳转行为。
   • 示例：
   • 这种用法让图像映射不仅仅是简单的链接跳转，而是能承载更多动态功能，比如显示提示信息、展开子菜单等。

图像映射的实际应用场景

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

比如，你可能见过：

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

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

Pic Copilot

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值仍然保持不变，导致可点击区域与缩放后的图片内容不匹配。

解决方案：

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

   • 获取原始图片的尺寸和当前图片的实际渲染尺寸。

   • 计算出图片缩放的比例。

   • 根据这个比例，动态地调整所有标签的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);

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

2. SVG + JavaScript（更现代，但更复杂） 如果你对灵活性要求更高，或者图像本身就是矢量图，那么使用SVG（可缩放矢量图形）来替代传统的和area标签可能是更好的选择。

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

总的来说，虽然图像映射在响应式方面有先天不足，但通过JavaScript库的辅助，它依然能在特定场景下发挥作用。如果不是非用不可，或者项目对响应式要求极高且交互复杂，我可能会倾向于SVG或纯CSS/JS的方案。