在浏览网页时，通常会出现在点击一张图片不同区域时，出现不同链接内容的情况，这就是图片的热点区域。所谓的热点区域，就是将一张图片划分成若干链接区域，访问者单击不同的区域，会链接到不同的目标页面。 在HTML5中，可以为图片创建3中类型的热点区域：矩形，圆形和多边形。创建热点区域使用<map>和<area>标记，</map>其语法格式如下：
(1) 要想建立图片热点区域，必须先插入图片。注意，图片必须增加usemap属性，说明该图像是热区映射图像，属性值必须以“#”开头，加上名字。 (2) <map>标记只有一个属性name，其作用是为区域命名，其设置值必须与<img>标记的usemap属性值相同。 (3) <area>标记主要是定义热点区域的形状及超链接，它有3个必需的属性。 *shape:控制划分区域的形状，取值有3个，分别是rect(矩形)，circle(圆形),poly(多边形)。 *coords：控制区域的划分坐标。如果shape属性的取值为rect，那么coords的设置值分别为矩形的左上角x,y坐标点和右下角x,y坐标点，单位为像素；如果shape属性值的取值为circle,那么coords的设置值分别是圆形圆心x,y坐标点和半径值，单位为像素；如果Shapes属性的取值为poly，那么coords的设置值分别为矩形各个点的x,y坐标，单位为像素。 *href：该属性为区域设置超链接的目标，设置值为“#”时，表示为空链接。
例子如下；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img src="images/3.png" usemap="#3">
<map name="3">
<area shape="circle" coords="403,390,112" href="https://chushou.tv/room/39849.htm">
<area shape="rect" coords="188,169,644,362" href="https://bbs./">
<area shape="poly" coords="579,689,625,465,188,598,626,593,393,645" href="https://hao.360.com/">
</map>
</body>
</html>