文章来源于：https://www.cnblogs.com/mq0036/p/3337327.html
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
8 <title>Document</title>
9 </head>
10
11 <body>
12 <!--
13 <area shape="rect" coords="x1, y1,x2,y2" href=url>表示设定热点的形状为矩形，左上角顶点坐标为（X1,y1），右下角顶点坐标为（X2,y2）。
14 <area shape="circle" coords="x1, y1,r" href=url>表示设定热点的形状为圆形，圆心坐标为（X1,y1），半径为r。
15 <area shape="poligon" coords="x1,y1,x2,y2 ......" href=url>表示设定热点的形状为多边形，各顶点坐标依次为（X1,y1）、（X2,y2）、（x3,y3） ......。
16 -->
17
18
19 <!-- img指热点图片，usemap指name为#planetmap的map. area标明具体的地方. coords标明坐标,href则是链接 -->
20 <img src="planets.jpg" usemap="#planetmap" alt="Planets" />
21 <map name="planetmap" id="planetmap">
22 <area shape="circle" coords="180,139,14" href="venus.html" alt="Venus" />
23 <area shape="circle" coords="129,161,10" href="mercur.html" alt="Mercury" />
24 <area shape="rect" coords="10,0,110,260" href="sun.html" alt="Sun" />
25 </map>
26 </body>
27
28 </html>
细节图
