HTML应用——图像局部映射

本文最后更新于：8 个月前

有一种常见的图片应用场景：点击图像上的某些不同部分，可以跳转到对应的详细链接页面，这就是「图像局部映射」。在HTML中国年通过img标签的usemap属性 + map标签 + area标签实现

HTML应用——图像局部映射

一、实例

1、使用场景

使用场景：创建带有可点击区域的图像映射

通常结合<img>标签的usemap属性使用，在<img>标签中创建可以点击跳转到区域，

比如下图，点击矩形框和圆形框对应的位置，可以相应地跳转到指定的新链接页面（可用来展示详细的信息）

image-20221105193619468

2、示例代码

示例代码如下：（可以直接复制运行查看实际效果）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<head>
    <title>Document</title>
    <style>
        .container {
            position: relative;
        }
        .box {
            border: 2px solid red;
            position: absolute;
            /* z-index: -1; */ 设置为-1时，映射区域可点击；注释掉时，映射区域被div标签覆盖，用来观察区域所处位置
        }
        #box1 {
            left: 750px;
            top: 200px;
            width: 100px;
            height: 100px;
            border-radius: 100%;
        }
        #box2 {
            left: 450px;
            top: 120px;
            width: 180px;
            height: 90px;
        }
    </style>
</head>

<body>
    <main>
        <h2>广东省地图</h2>
        <div class="container">
            <img src="https://qiuzcc-typora-images.oss-cn-shenzhen.aliyuncs.com/images/2022/202211051434476.jpeg"
                alt="Workplace" usemap="#workmap" width="1000" height="800">
            <div class="box" id="box1"></div>
            <div class="box" id="box2"></div>
        </div>

        <map name="workmap">
            <area shape="circle" coords="750,200,100" alt="梅州" href="https://baike.baidu.com/item/%E6%A2%85%E5%B7%9E/2554831" target="_blank">
            <area shape="rect" coords="450,120,630,210" alt="韶关" href="https://baike.baidu.com/item/%E9%9F%B6%E5%85%B3/868404" target="_blank">
        </map>
    </main>
</body>
</html>
 <!-- 通过实践发现，area元素在文档流中实际不存在，它的坐标为(0,0)
        但是它的作用范围是实际存在的（鼠标悬浮在区域上面时，光标会发生变化）。
        而且这个区域的坐标计算是相对于img标签的起点来开始计算的，而不是相对于文档流或窗口，这具有很大的实际意义，大大简化了坐标的计算
    
        area所定义出来的区域是不可见的，为了能够显示“看见”这些区域，使用了div元素+border属性来显现出这些区域
        div元素需要放置在和img标签同个容器内（而且要保证，容器内只有这两种元素）
        然后需要设置div的position属性为absolute，让它脱离文档流，这样才能覆盖到真正的区域上面
        但是，这样带来的坏处就是，div标签遮蔽了area区域，无法点击。
    -->

3、解析

  1. <area>标签在文档中是找不到的，显示坐标为(0,0)。但是它所表示的映射区域是实际存在的，只是不可见

    image-20221105200426251

  2. 为了能够”看见“映射区域，需要通过 「div盒子+border」的方式去显示映射区域

    首先，用一个容器包裹<img>标签和<div>盒子

    然后，给该容器设置一个相对布局，给<div>盒子设置成绝对布局，让<div>盒子脱离文档流，悬浮于<img>之上

    接着，给<div>盒子设置border属性，显示出可见边框

    最后根据映射区域的实际位置给<div>盒子计算出坐标和宽高。这样就可以通过<div>盒子的边框观察到映射区域了

  3. <area>标签的coords属性中的坐标值，最好通过上述所说的 「div盒子+border」 的方式去获取。先把边框移动到期望的位置，然后再根据<div>盒子的坐标去设置<area>的坐标

    （本人就因为一开始没有使用这种方式，而是使用微信屏幕截图自带的标尺去计算坐标，然而实际上，计算出的坐标与实际坐标并不相同，所以实际偏离到了图片外，于是没有出现预期的点击效果。很久都没有发现这个bug，浪费了大量时间）

  4. 注意：<area>的坐标系是基于使用它的那个<img>标签的，以<img>标签的左上角起始点(0,0)

二、map标签

用来包裹<area>标签，有一个唯一的name属性，用作被查询字段（比如用来和<img>标签的usemap属性配对），不同<map>标签的name属性不能相同。

如果要添加id属性，必须与name属性相同

三、area标签

用来在图片上定义一个特点区域，可以关联一个超链接，仅能出现在<map>标签内部

属性 值 描述
shape rect，矩形
circle，圆形
poly，多边形		 特点区域的形状
coords[1] (x1,y1,x2,y2)
(x,y,r)
(x1,y1,x2,y2,x3,y3)		 给热点区域设定具体的坐标值
href 链接URL
alt 在href属性时才需要，显示替代文本串
target _blank
_self（默认）
_parent
_top		 加载链接的方式
download 这个属性如果存在的话，表明作者想把超链接用于下载一个资源
rel 对于包含 href 属性的锚，该属性指定目标对象与链接对象的关系
type MIME 指定链接目标的 MIME 类型
media 指明链接资源的媒体类型

[1] coords属性

  • 当shape="circle"时，该属性格式为：(x,y,r)，分别表示原点的横、纵坐标、半径
  • 当shape="rect"时，该属性格式为：(x1,y1,x2,y2)，分别表示矩形左上角、右下角的横、纵坐标
  • 当shape="poly"时，该属性格式为：(x1,y1,x2,y2,...,xn,yn)，分别表示多边形每个点的横、纵坐标

注意：只用数值，不用加单位，单位默认为px

1
2
3
4
<map name="workmap">
    <area shape="circle" coords="750,200,100" alt="梅州" href="" target="_blank">
    <area shape="rect" coords="450,120,630,210" alt="韶关" href="" target="_blank">
</map>
HTML > HTML应用
HTML应用——图像局部映射
http://timegogo.top/2022/11/05/HTML/HTML应用——图像局部映射/
作者
丘智聪
发布于
2022年11月5日
更新于
2023年7月16日
许可协议