创建热点区域
前面提到超链接里面的网页元素可以是一张图片，点击图片就可以进入不同的地址。如果希望点击图片的不同区域进入不同的链接，可以使用图片热点区域。
当一张图片的不同区域显示不同的超链接内容时，这就是图片的热点区域。将一个图片划分成若干个链接区域，访问者单击不同的区域会链接到不同的目标页面。
HTML中可以为图片创建三种类型的热点区域：矩形、圆形和多边形。创建热点区域使用的标记是 <map> 和 <area>，需要配合 <img> 标记使用。
图片 <img> 中增加 usemap 属性，属性值用 # 开头（比如 #pic），然后 <map> 标记中有一个 name 或 id 属性，也设为对应值。
本节代码
<html>
<body>
<p>请点击图像上的星球，把它们放大。</p>
<img src="/images/eg_planets.jpg" border="0" usemap="#planetmap" alt="Planets" />
<map name="planetmap" id="planetmap">
<area shape="circle" coords="180,139,14" href="/example/html/venus.html" target="_blank" alt="Venus" />
<area shape="circle" coords="129,161,10" href="/example/html/mercur.html" target="_blank" alt="Mercury" />
<area shape="rect" coords="0,0,110,260" href="/example/html/sun.html" target="_blank" alt="Sun" />
</map>
<p>
<b>注释：</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。
</p>
</body>
</html>补充说明
<area>标记是单标签，必须放在<map>内部shape属性取值：rect（矩形）、circle（圆形）、poly（多边形）coords属性根据形状不同，取值含义不同：- 矩形：
x1,y1,x2,y2（左上角和右下角坐标） - 圆形：
x,y,radius（圆心坐标和半径） - 多边形：
x1,y1,x2,y2,...（各顶点依次坐标）
- 矩形：
<img>的usemap属性值必须以#开头，与<map>的name或id对应- 同时设置
name和id是为了兼容不同浏览器 - 热点区域会覆盖在图片上方，优先响应点击事件