1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>document</title>
7 </head>
8 <body>
9 <!-- 一个超链接中放一张图片，点击图片，则跳转到太阳系简介
10 点击图片特定区域，跳转到相关页面 -->
11 <a href="https://baike.baidu.com/item/%e5%a4%aa%e9%98%b3%e7%b3%bb/173281?fr=aladdin">
12 <!-- img元素，usemap要写上map元素的name，加上# -->
13 <img usemap="#solarmap" src="./image/solar.jpg" alt="太阳系图片">
14 </a>
15 <map name="solarmap">
16 <!-- shape形状，coords坐标 -->
17 <!-- shape的值有：circle圆、rect矩形、poly多边形 -->
18 <!-- shape="circle" coords="x,y,半径" -->
19 <!-- shape="rect" coords="左上坐标的x,左上坐标的y，右下坐标的x,右下坐标的y" -->
20 <!-- shape="poly" coords="各个顶点坐标的x和y,顺时针书写" -->
21 <area shape="circle" coords="362,203,45" href="https://baike.baidu.com/item/%e6%9c%a8%e6%98%9f/222105?fr=aladdin" alt="木星图片">
22 <area shape="rect" coords="325,280,400,325" href="https://baike.baidu.com/item/%e6%9c%a8%e6%98%9f/222105?fr=aladdin" alt="木星文字">
23 <area shape="poly" coords="655,400,625,375,655,330,685,340" href="https://baike.baidu.com/item/%e5%86%a5%e7%8e%8b%e6%98%9f/137498?fr=aladdin" alt="冥王星文字">
24 </map>
25 </body>
26 </html>