html -- map标签

一、语法介绍

*注意：

1. img 标签中的 usemap 属性可引用 中的 id 或 name 属性（由浏览器决定），所以我们需要同时添加这两个属性
2. 语法范例：

1. area 标签

1. 定义图像映射区域（定义可点击区域的图像）
2. 在 标签中使用
3. img 标签中的 usemap 属性与 map 元素 name 属性相关联，创建图像与映射之间的联系

2. 属性

2.1 alt

它定义在图像无法显示时的替代文本

语法： alt=“text”

2.2 href

语法：href=“url”

定义此区域的目标url

2.3 coords

语法：coords=“坐标值(x,y,r)”

1. coords属性规定区域的x和y坐标
2. coords属性与shape属性配合使用，来规定区域的尺寸、形状和位置
   详细解释：
   coords属性定义了图像映射中对鼠标敏感区域的坐标
   坐标的数字及其含义取决于 shape 属性中决定的区域形状
   可以将图像映射中的超链接区域定义为矩形、圆形或多边形
   注意：
   如果某个 area 标签中的坐标和其他区域发生了重叠，会优先采用最先出现 area 标签（先到先得）。

2.4 nohref

语法： nohref=“url”

nohref属性规定该区域没有相关的链接。

2.5 target

语法: target=“value”

规定在何处打开 href 属性指定的目标URL
属性值：

属性值	描述
_blank	在新窗口中打开被链接的文档
_self	默认。在相同的框架中打开被链接的文档
_parent	在父窗口中打开被链接的文档
_top	在整个窗口中打开被链接的文档
framename	在指定的框架中打开被链接的文档

2.6 shape

语法：shape=“value”

1. shape属性定义图像映射中对鼠标敏感的区域的形状
2. shape属性与 coords属性配合，可规定区域的尺寸、形状和位置
3. shape属性的值会影响浏览器对 coords 属性的解释
4. 如果未使用 shape属性，那么默认就是该区域覆盖整个图像
5. 如果未使用 shape属性也未指定 coords(指定坐标)，浏览器会忽略整个区域

shape属性形状介绍：

名称	属性值	描述
default		规定全部形状
圆形（circle或circular）	circle	定义圆形
多边形（poly或polygon）	poly	定义多边形
矩形（rect或rectangle）	rect	定义矩形区域

2.6.1 圆形（circle或circular）

shape="circle" coords="x,y,r
x,y坐标定义了圆心的位置（“0,0” 是图像左上角的坐标），r是以像素为单位的圆形半径

2.6.2 多边形（poly或polygon）

shape="poly" coords="x1,y1,x2,y2..."

每一对“x,y” 坐标都定义了多边形的一个顶点。（“0,0” 是图像左上角的坐标）
定义三角形至少需要三组坐标；高纬多边形则需要更多数量的顶点

2.6.3 矩形（rect或rectangle）

shape="rect" coords="x1,y1,x2,y2"
第一个坐标是矩形的一个角的顶点坐标，另一对坐标是对角的顶点坐标。“0,0”是图像左上角的坐标
*定义矩形实际上是定义带有四个顶点的多边形的简化方法

2.7 鼠标划过map区域变换样式

webkit-any-link

       // css
       
        area:-webkit-any-link {
            cursor: pointer
        }

---

二、实例

1. 圆形 （circle或circular）

1.1 代码片段： 定义一个坐标为（270,135,15）的圆形，位置在羽毛球球场上的热区，链接为到百度的地址。
270：圆心的X坐标
135: 圆心的Y坐标
15： 圆的半径

1.2 效果截图：

---

2. 多边形 (poly或polygon)

2.1 代码片段： 定义一个坐标为（50,40,170,0,260,75,243,190,130,235,35,153）的多边形。位置在体育馆的热区，链接为到百度的地址。

2.1 效果截图：

---

3. 矩形 (rect或rectangle)

3.1 代码片段： 定义一个坐标为（350,80,500,150）的矩形，位置在网球场的热区，链接为到百度的地址。
（350,80）是矩形的顶点坐标（左上角）
（500,150）是对角的顶点坐标（右下角）

    <img src="img/ditu.png" usemap="#directionMap" alt="地图" />
    <map name="directionMap" id="directionMap">
        <area shape="rect" coords="350,80,500,150" href="https://www.baidu.com" alt="网球场">area>
    map>

3.1 效果截图：

---

4. 最终效果

4.1 代码片段：

     <img src="img/ditu.png" usemap="#directionMap" alt="地图" />
     <map name="directionMap" id="directionMap">
        <area shape="poly" coords="50,40,170,0,260,75,243,190,130,235,35,153" href="https://www.baidu.com"
            alt="体育中心-体育馆">area>
        <area shape="circle" coords="270,135,15" href="https://www.baidu.com" alt="羽毛球场">area>
        <area shape="rect" coords="350,80,500,150" href="https://www.baidu.com" alt="网球场">area>
    map>

4.2 效果截图：

---

相关链接：
coords形状介绍
area标签
张鑫旭area范例