map标签的应用

1.map标签

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

2.示例

 "./images/345.jpg" alt="" srcset="" usemap="#mp">
    
复制代码

3.shape参数说明

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

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

poly：多边形区域，两个数值确定一个坐标，6个数值确定3个坐标，就可以组成一个三角形区域

4.为什么不用标签？他的用法不止应用于图片

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

5.局限

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

6.局限的解决办法

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

7.总结

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