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" id="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>