昨天的工作涉及到了一张热点图，说到热点图这就涉及到了<area><map>两个标签，在一张图上点不同的个图案就能跳转到不同的链接？对，这两个标签就是这么神奇。
示例
如下图所示，图中一共有6个方格，我们点击不同的方格需要跳转到相应商品的链接。这就是我们所说的热点图了，其中涉及到了<area><map>两个标签。
图示
具体怎么做？我们往下看。
<map>标签
定义：定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像。
格式示例：
<map name="banner" id="banner"></map>
<map>标签的重点在于一定要有一个id名，id是对应图片与<map>标签的连接桥梁。
注意：<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性（取决于浏览器），所以我们应同时向 <map> 添加 id 和 name 属性。
<area>标签
定于：<area> 标签定义图像映射中的区域（注：图像映射指得是带有可点击区域的图像）。
area 元素总是嵌套在 <map> 标签中。
<map name="planetmap" id="planetmap">
<area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
<area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
<area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
</map>
提示和注释：
<img> 中的 usemap 属性可引用 <map> 中的 id 或 name 属性（由浏览器决定），所以我们需要同时向 <map> 添加 id 和 name 两个属性。直白的说就是为了搞定浏览器兼容问题，咱们id和name都得写上去。
<area>还有shape属性，这里是指的定义区域的形状。共有四个值：默认default、矩形rect、圆形circ、多边形poly。shape 属性与 coords 属性配合，可以规定区域的尺寸、形状和位置。至于coords属性，本篇文章暂时不提。
shape 属性的值会影响浏览器对 coords 属性的解释。如果未使用 shape 属性，那么会假设使用值 default。依照标准，default 意味着该区域覆盖整个图像。在实际中，浏览器默认使用矩形区域，并期望能找到 4 个 coords 值。如果没有指定形状，而且在标签中也没有包括 4 个坐标，那么浏览器会忽略整个区域。
可以识别 shape 属性的 default 值的浏览器，可以提供一个包括全部热点的区域，以用于在超过其他热点定义的范围之外单击的情况。由于区域在 <map> 标签中是采用“先来先得”的顺序，所有必须将默认区域放置在后面。否则，默认区域会覆盖其他的图像映射中出现的所有区域。
浏览器在形状名称的实现方面没有严格要求。例如，对于矩形，Netscape 4 不能识别 "rectangle"，却能识别 "rect"。出于这个原因，我建议使用缩写的名称。
如果单从<area>原本作用来讲，这应该是一个非常有实用价值的属性，例如，社交站点的图片往往都会有人类识别标注功能，类似这样：
人脸识别
制作工具
至于如何快速的制作热点图，大家当然会想到工具。在这里可以使用Dreamwaver或者各类淘宝在线制作热点图的网站，缺点是那些网站得上传图片到淘宝图片空间，具体的教程网站上有。
值得一提的是我第一次使用的是国外网站Image-Maps，在此篇文章分享网站使用方法的时候写到注册登陆，发现再次制作热点图需要支付服务费，无法继续写下去了。如果只使用一次的同学可以去尝试一下，具体步骤是：注册、登陆、上传图片、划定范围、设定链接、生成代码。
Image-Maps
网友评论