map标签的应用

1.map标签

带有可点击区域的图像映射，一张图片能够有多个不一样可点击区域，，每一个区域点击后跳转页面不一样

2.示例

<img src="./images/345.jpg" alt="" srcset="" usemap="#mp">
    <map name="mp" id="mp">
        <area shape="rect" coords="20,20,80,80" href="#d1" alt="1">
        <area shape="circle" coords="300,20,50" href="#d2" alt="">
        <area shape="poly" coords="0,20,80,80,60,120" href="#d3" alt=""> 
    </map>
复制代码

3.shape参数说明

rect：矩形区域，4个数字两两组合造成坐标；

circle：圆形区域，前两个肯定圆心，第三个参数肯定半径；

poly：多边形区域，两个数值肯定一个坐标，6个数值肯定3个坐标，就能够组成一个三角形区域

4.为何不用<a>标签？他的用法不止应用于图片

经过area标签的href和alt属性能够看到，这两个标签几乎有相同的功能，可是在特定需求下，咱们须要将某个div元素上，中间上半部分跳转到a地址，其他地方跳转到b地址（脑补刘海屏），传统作法是将html经过css浮动定位等方式来排布，比较麻烦。而a标签不能嵌套使用，在浏览器解析过程当中，会将两个嵌套的a标签解析为同级的a标签； 在这种状况下，咱们可使用area标签，给div添加热区映射到不一样的跳转（添加一个矩形，添加一个多边形）。

5.局限

• <area>标签实际上能够脱离<map>正常使用，就像普通的<a>标签同样，他一样不支持嵌套
• Firefox浏览器不支持（Firefox的<area>元素默认display:none，且没法重置）
• 没法使用键盘Tab索引访问

6.局限的解决办法

在图片上使用，没毛病的老铁，只要别出图片范围

7.总结

有价值，图片上映射不一样的点击区域，很方便，可是在div元素上直接取巧使用，会有兼容问题