PHP小码农

Appearance

image-map 图像映射 ​

图像映射（Image Map）允许你将一张图片划分为多个可点击区域，每个区域链接到不同的目标。本节将介绍 <map> 和 <area> 标签的用法、坐标系统以及如何创建客户端图像映射。

前置知识

阅读本节前，建议先了解：figure 与 figcaption

基础概念 ​

图像映射（Image Map）是一种将图片的不同区域映射到不同链接的技术。通过 <map> 和 <area> 标签，你可以定义图片上的矩形、圆形或多边形可点击区域，每个区域可以链接到不同的 URL。

图像映射有两种类型：客户端图像映射（使用 <map>/<area>，在浏览器端处理）和服务器端图像映射（使用 ismap 属性，在服务器端处理）。现在几乎都使用客户端图像映射。

语法 ​

基本语法 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>图像映射</title>
</head>
<body>
  <h1>图像映射基础</h1>

  <!-- img 通过 usemap 关联到 map -->
  <img src="navigation.png"
       alt="网站导航图"
       usemap="#nav-map"
       width="600" height="100">

  <!-- map 定义映射区域，name 与 img 的 usemap 对应 -->
  <map name="nav-map">
    <!-- 矩形区域：左上角 (0,0)，右下角 (100,100) -->
    <area shape="rect"
          coords="0,0,100,100"
          href="/home"
          alt="首页">

    <!-- 圆形区域：圆心 (200,50)，半径 40 -->
    <area shape="circle"
          coords="200,50,40"
          href="/about"
          alt="关于我们">

    <!-- 多边形区域：各顶点坐标 -->
    <area shape="poly"
          coords="300,0,350,50,300,100,250,50"
          href="/contact"
          alt="联系我们">
  </map>
</body>
</html>

详细说明 ​

shape 与 coords 属性详解 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>shape 与 coords</title>
</head>
<body>
  <h1>shape 与 coords</h1>

  <img src="china-map.png"
       alt="中国地图"
       usemap="#china-map"
       width="600" height="500">

  <map name="china-map">
    <!--
      shape="rect"：矩形
      coords="x1,y1,x2,y2"
      (x1,y1) 左上角坐标，(x2,y2) 右下角坐标
    -->
    <area shape="rect" coords="50,80,150,180"
          href="/beijing" alt="北京">

    <!--
      shape="circle"：圆形
      coords="cx,cy,r"
      (cx,cy) 圆心坐标，r 半径
    -->
    <area shape="circle" coords="420,200,30"
          href="/shanghai" alt="上海">

    <!--
      shape="poly"：多边形
      coords="x1,y1,x2,y2,x3,y3,..."
      各顶点坐标，至少 3 个点
    -->
    <area shape="poly" coords="320,280,360,260,380,290,350,310,310,300"
          href="/chengdu" alt="成都">

    <!--
      shape="default"：默认区域
      点击其他区域未覆盖的地方时触发
    -->
    <area shape="default" href="/china-overview" alt="中国概览">
  </map>
</body>
</html>

shape 类型对比 ​

shape 值coords 格式适用场景
rect"x1,y1,x2,y2"（左上角和右下角）矩形按钮、横幅区域
circle"cx,cy,r"（圆心坐标和半径）圆形图标、标记点
poly"x1,y1,x2,y2,..." （顶点序列）不规则形状、地图区域
default无需 coords回退/默认链接

area 的其他属性 ​

html
<map name="example">
  <!-- href：链接地址 -->
  <area shape="rect" coords="0,0,100,100"
        href="https://example.com" alt="示例">

  <!-- target：打开方式 -->
  <area shape="rect" coords="100,0,200,100"
        href="https://example.com"
        target="_blank"
        alt="新窗口打开">

  <!-- download：触发下载 -->
  <area shape="rect" coords="200,0,300,100"
        href="document.pdf"
        download
        alt="下载文件">

  <!-- rel：关系属性 -->
  <area shape="rect" coords="300,0,400,100"
        href="https://example.com"
        target="_blank"
        rel="noopener noreferrer"
        alt="安全外部链接">

  <!-- nohref：不可点击的区域（HTML5 中省略 href 即可） -->
  <area shape="rect" coords="400,0,500,100"
        alt="占位区域（不可点击）">
</map>

坐标的确定方法 ​

确定图片中区域的坐标通常需要图片编辑工具：

  1. Photoshop：打开图片后，使用"信息"面板查看鼠标位置的像素坐标
  2. 在线工具：使用图像映射生成器（如 image-map.org）
  3. 浏览器开发者工具：在页面上定位元素，查看坐标

实战示例 ​

网站导航图像映射 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>导航图像映射</title>
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      text-align: center;
      padding: 20px;
    }
    .nav-map {
      max-width: 600px;
      margin: 0 auto;
    }
    .nav-map img {
      max-width: 100%;
      height: auto;
    }
  </style>
</head>
<body>
  <h1>产品展示导航</h1>

  <div class="nav-map">
    <img src="products-overview.jpg"
         alt="产品概览图：左侧手机、中间平板、右侧笔记本"
         usemap="#products"
         width="600" height="400">

    <map name="products">
      <!-- 手机区域 -->
      <area shape="rect" coords="20,50,180,350"
            href="/products/phone"
            alt="查看手机产品">

      <!-- 平板区域 -->
      <area shape="rect" coords="210,80,390,320"
            href="/products/tablet"
            alt="查看平板产品">

      <!-- 笔记本区域 -->
      <area shape="rect" coords="420,100,580,300"
            href="/products/laptop"
            alt="查看笔记本产品">

      <!-- 默认区域 -->
      <area shape="default" href="/products" alt="查看全部产品">
    </map>
  </div>

  <p>点击产品图片上的不同区域，可跳转到对应的产品详情页。</p>
</body>
</html>

注意事项 ​

  • 图像映射的坐标基于图片的原始尺寸，CSS 缩放不会影响坐标映射
  • <area> 没有 <img> 的 usemap 属性就无法工作
  • <map> 的 name 属性必须与 <img> 的 usemap 值匹配（不含 #）
  • <area> 的 alt 属性是必需的
  • 图像映射不适合用于复杂、密集的可点击区域——应优先使用 CSS 定位 + 链接
  • 移动端触摸设备对图像映射的支持可能不佳
  • nohref 属性在 HTML5 中已废弃，省略 href 即可

最佳实践 ​

  • 现代 Web 开发中图像映射使用较少，优先考虑 CSS/HTML 常规方案
  • 如需使用，确保为每个 <area> 提供 alt 文本
  • 使用在线图像映射工具快速生成坐标代码
  • 考虑响应式问题：图像映射在小屏幕上可能难以操作
  • 对于地理地图等场景，考虑使用 SVG 或专门的地图库替代

下一节

继续学习：懒加载 loading

参考链接 ​