使用map标签实现图片内区块点击跳转

使用map标签实现图片内区块点击跳转

什么是map标签

<map>标签用于定义客户端图像映射。图像映射指的是带有可点击区域的图像。
而每一个<area>元素则分别对应着每一个可跳转的区域

ps：<area>元素永远嵌套在 <map>元素内部。

map标签的使用

插入一张图片

<a href="https://baike.baidu.com/item/%E5%A4%AA%E9%98%B3%E7%B3%BB/173281?fr=aladdin">
	<img src="images/solar.jpg" usemap="#solar">
</a>

*ps：此处的usemap与<map>标签中的name属性相关联

设置<map>标签

<map name="solar" id="solar"></map>

*ps：此处name和id与上文usermap绑定。建议name和id都设置，浏览器不同效果也不同。

设置<area>标签

<map name="solar" id="solar">
	<area shape="circle" coords="360 200 50" href="https://baike.baidu.com/item/%E6%9C%A8%E6%98%9F/222105?fr=aladdin">
	<area shape="rect" coords="420 150 580 250" href="https://baike.baidu.com/item/%E5%9C%9F%E6%98%9F/136354?fr=aladdin">
</map>

shape参数说明
rect：矩形区域，4个数字两两组合形成坐标；
circle：圆形区域，前两个确定圆心，第三个参数确定半径；
poly：多边形区域，两个数值确定一个坐标，6个数值确定3个坐标，就可以组成一个三角形区域

最终效果