HTML中图像热区的使用

制作人：全心全意

图像热区：当鼠标指向图片的不同部位时,可以打开不同的超链接

<map>：图像热区标签，包含图像热区的各区域，有id属性和name属性（一个图片分区域超链接）
<area>：图像热区子标签，图像热区中的每一个区域

map属性：
　　id属性和name属性表示名称，设置为相同值，与img标签的usemap属性匹配。
area属性：
　　shape：热区形状
　　　　circle：圆形，对应坐标为（横坐标，纵坐标，半径）
　　　　rect：矩形，对应坐标为（第一坐标点横坐标，第一坐标点纵坐标，第二坐标点横坐标，第二坐标点纵坐标）
　　coords：坐标位置
　　href：区域链接目标
　　alt：热区替换文本

示例代码：

<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=251232718,145817547&fm=26&gp=0.jpg" border="0" usemap="#pmap" alt="四季"/>

<map name="pmap" >
	<area shape="rect" coords="0,65,125,245" href="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602827964597&di=d8c296f5a5a21cdc6e025ca72405add8&imgtype=0&src=http%3A%2F%2Fa.hiphotos.baidu.com%2Fzhidao%2Fwh%3D450%2C600%2Fsign%3D8970f4e6d22a60595245e91e1d0418ad%2Fa8773912b31bb0512066ab07337adab44aede05b.jpg" alt="春"  />
	<area shape="rect" coords="126,65,250,245" href="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602827999451&di=94ac33783a7a9a4625910f29f0f4629d&imgtype=0&src=http%3A%2F%2Fpic157.nipic.com%2Ffile%2F20180312%2F26217108_211757419000_2.jpg" alt="夏"  />
	<area shape="rect" coords="251,65,375,245" href="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2418938015,1879985533&fm=26&gp=0.jpg" alt="秋"  />
	<area shape="rect" coords="376,65,500,245" href="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602828079322&di=25e4d317a00e1d564f6d71b5b6ea19db&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fq_70%2Cc_zoom%2Cw_640%2Fimages%2F20181109%2F3a7ceb21723d478cbdc91792c0aec360.jpeg" alt="冬"  />
</map>