HTML之图像地图将图片分成不同区域，在不同区域上做跳转链接，即点击图片的不同区域让它跳转至不同链接

最新推荐文章于 2022-12-05 14:43:40 发布

况几

最新推荐文章于 2022-12-05 14:43:40 发布

阅读量2k

点赞数

分类专栏： web前端文章标签： vscode 前端

本文链接：https://blog.csdn.net/angrynouse/article/details/127581471

版权

web前端专栏收录该内容

56 篇文章

订阅专栏

在这里插入图片描述
用map标签来点击图片，从而实现图片不同区域的跳转

<img src="./img/bg-home.jpg" alt="" usemap="#map">
<map name="map" id="map">
     <area shape="poly" coords="583,382,587,357,609,359,611,283,1014,247,1392,352,1362,410,1218,445,583,382" href="https://www.baidu.com/" alt="">
     <area shape="poly" coords="584,392,532,500,1194,587,1386,533,1414,398,1231,448,584,392" href="https://www.mi.com/" alt="">
     <area shape="poly" coords="591,520,565,595,510,618,1169,731,1406,641,1395,542,1170,601,591,520" href="https://huaban.com/" alt="">
     <area shape="poly" coords="570,641,569,742,1164,867,1395,767,1398,655,1172,734,570,641" href="https://www.qingnian8.com/" alt="">        
</map>