网页学习第四天

图像热区超链接

不知不觉第四天了，希望疫情快快过去。

说起来，这个我都不是很想学，网上制作一个热区代码相当容易

<div style='width:950px;height:483px;overflow:hidden;font-size:0px;line-height:0px;'>
<img src="http://img03.taobaocdn.com/imgextra/i3/705080336/TB2xRhlaXXXXXcpXXXXXXXXXXXX-705080336.jpg" border='0' usemap='#map6659424832' alt=''/><map name='map6659424832' id='map6659424832'><area shape='rect' coords='287,327,437,397'  href='http://baidu.com' target='_blank' title='http://baidu.com' alt='' /><area shape='rect' coords='769,325,877,407'  href='http://baidu.com' target='_blank' title='http://baidu.com' alt='' /></map></div>

其实真正是热区链接的就是下面这个

<img src="http://img03.taobaocdn.com/imgextra/i3/705080336/TB2xRhlaXXXXXcpXXXXXXXXXXXX-705080336.jpg"  usemap='#map11112222' />

<map name='map11112222' id='map11112222'>
	<area shape='rect' coords='287,327,437,397' href='http://baidu.com'   />
	<area shape='rect' coords='769,325,877,407'  href='http://baidu.com'  />
</map>

首先是有一个 usemap
这是用来建立<img><map>的关系

而在<map>内部，id和name是必须的，根据浏览器支持usemap会与之关联。

<area>在map内部，表示区域，shape是区域的形状，coords是区域的坐标

rect表示矩形，坐标可以利用Photoshop寻找

矩形rect就是利用对角的x，y坐标即可。

圆形则需要三个参数，圆心坐标与半径。

多边形poly则需要各个点依次的坐标。

参数填写在area属性coords中