前言
上次介绍完了HTML5中超链接的基础知识，其实归纳起来就是一个<a>标签加上链接地址就行了。这次，介绍个如何用HTML5创建热点区域。有时，我们在浏览网页的时候会发现，当我们单击一张图片的不同区域的时候会显示不同的链接内容，这就是所谓的图片热点区域。其实也就是把一个图片划分成若干个链接区域。访问者单击不同的区域会跳转到不同的目标页面。
创建热点区域
用Dreamwear精确定位热点区域。
创建热点区域
在HTML中，可以为图片创建3种类型的热点区域：矩形、圆形和多边形。创建热点区域使用标记<map>和<area>，其语法格式如下：
1<img src="图片地址" usemap="#名称" >
2<map id="#名称">
3 <area shape="rect" coords="10,10,100,100" href="#" >
4 <area shape="circle" coords="120,120,50" href="#" >
5 <area shape="poly" coords="78,13,81,14,53,32,86,38" href="#">
6</map>
在上面的语法中请注意以下几点：
要想建立图片热点区域，必须先插入图片。并且图片必须增加usemap属性，说明该图像是热点区映射图像，而且必须以#开头。
<map>标记只有一个属性id，其作用是为区域命名，属性值必须与<img>标记的usemap的属性值相同。
<area>标记主要定义热点区域的形状与超链接，它有三个相同的属性:
1.shape属性，控制划分区域的形状，其值有3个，分别为rect（矩形）、circle（圆形）、poly（多边形）。
2.coords属性，控制区域划分的坐标。
如果shape属性取值为rect，那么coords的设置分别为矩形的左上角x，y坐标点和右下角x，y坐标点，单位为像素。
如果shape属性取值为circle，那么coords的设置分别为圆形圆心的x，y坐标点和半径点值，单位为像素。
如果shape属性取值为poly，那么coords的设置分别为多边形的各个点x，y坐标点，单位为像素。
3.href属性是为设置超链接的目标，设置值为#时，表示空超链接。
用Dreamwear精确定位热点区域。
上面讲述了HTML创建热点区域的方法，但是最让我们头疼的是坐标点的定位。简单的形状还可以，如果边数一多，的确让人痛苦。作为一个工具，人们使用的目的就是为了简单方便，如果太复杂了必然是会被淘汰的。面对这样多的坐标点的确定，不推荐使用HTML代码去完成。在这里建议使用Dreamwear来实现。
通过一个例子，来看具体操作。
现在有如下一张图片，要求通过使用shape属性为矩形、圆形和多边形来实现点击不同的区域跳转到相应的区域。
1.创建一个HTML文档，并且插入一张图片
2.选中包含图片的一行代码，Ctrl+F3调出属性面板，面板下方有三个图标按钮，依次代表矩形、圆形和多边形，点击相应按钮即可创建热点区域。
3.将上方的设计模式切换成设计，选择相应的热点按钮。如下图，选择矩形按钮对图片进行操作。
4.如果绘制出来的热点区域有误差，可以通过【指针热点】工具进行编辑，即热点按钮旁边那个像鼠标箭头的东西。绘制完后，会在代码模式中自动添加相应代码，通过修改href属性的值，就可以链接到相应的位置。
下面给出：小编制作的代码：
1<!DOCTYPE html>
2<html>
3<head>
4 <meta charset="utf-8">
5 <title>创建热点区域</title>
6</head>
7<body>
8<img src="04.png" alt="" width="1055" height="665" usemap="#Map" border="0"/>
9<map name="Map">
10 <area shape="rect" coords="131,86,330,286" href="h2.html" target="_blank">
11 <area shape="circle" coords="530,187,91" href="h3.html" target="_blank">
12 <area shape="rect" coords="726,92,937,289" href="h4.html">
13 <area shape="poly" coords="865,382,915,428,916,518,875,567,786,570,733,523,738,430,771,388" href="h5.html">
14 <area shape="rect" coords="131,381,325,573" href="h6.html" target="_self">
15 <area shape="circle" coords="523,478,92" href="h7.html" target="_self">
16</map>
17</body>
18</html>
最后还是希望各位能多去动手写写。
