热点地图 map

效果：点击热点地图内指定区域跳转到 指定链接

使用标签：<img>|<map>|<area>

相关属性：

　　<img>

　　　　src：图片路径 

　　　　usemap：启用热点地图（map）传入#map的name属性值

　　<map>

　　　　name/id ：定义用于绑定的名称/ID

　　<area>

　　　　shape: 　　指定区域 的形状 

　　　　coords：　　指定区域 的定位

　　　　href:　　指定链接路径

shape属性值 对应coords值
rect x-a y-a x-b y-b
circle x y R
poly x1 y1 x2 y2 x3 y3  ... ...

 

 

下面以圆形点击区域为例，创建热点地图：

此例中 指定区域 为圆形

A点为圆心

A点到图片最左侧距离为 x

A点到图片上边的距离为 y

R为圆形的半径

 

 

 1     <img src="./star.jpg" alt="star" usemap="#star">
 2     <map name="star" id="star">
 3         <area shape="circle" coords="133 210 10"
 4             href="https://baike.baidu.com/item/%E5%85%AB%E5%A4%A7%E8%A1%8C%E6%98%9F/7990672?fr=aladdin#2" alt="Mercury"
 5             target="_blank">
 6         <area shape="circle" coords="186 188 15"
 7             href="https://baike.baidu.com/item/%E5%85%AB%E5%A4%A7%E8%A1%8C%E6%98%9F/7990672?fr=aladdin#3" alt="Venus"
 8             target="_blank">
 9         <area shape="circle" coords="239 159 15"
10             href="https://baike.baidu.com/item/%E5%85%AB%E5%A4%A7%E8%A1%8C%E6%98%9F/7990672?fr=aladdin#4" alt="Earth"
11             target="_blank">
12         <area shape="circle" coords="277 124 11"
13             href="https://baike.baidu.com/item/%E5%85%AB%E5%A4%A7%E8%A1%8C%E6%98%9F/7990672?fr=aladdin#5" alt="Mars"
14             target="_blank">
15         <area shape="circle" coords="370 136 36"
16             href="https://baike.baidu.com/item/%E5%85%AB%E5%A4%A7%E8%A1%8C%E6%98%9F/7990672?fr=aladdin#6" alt="Jupiter"
17             target="_blank">
18         <area shape="circle" coords="460 95 30"
19             href="https://baike.baidu.com/item/%E5%85%AB%E5%A4%A7%E8%A1%8C%E6%98%9F/7990672?fr=aladdin#7" alt="Saturn"
20             target="_blank">
21         <area shape="circle" coords="534 56 25"
22             href="https://baike.baidu.com/item/%E5%85%AB%E5%A4%A7%E8%A1%8C%E6%98%9F/7990672?fr=aladdin#8" alt="Uranus"
23             target="_blank">
24         <area shape="circle" coords="594 21 20"
25             href="https://baike.baidu.com/item/%E5%85%AB%E5%A4%A7%E8%A1%8C%E6%98%9F/7990672?fr=aladdin#9" alt="Neptune"
26             target="_blank">
27         <area shape="circle" coords="245 123 4" href="https://baike.baidu.com/item/%E6%9C%88%E7%90%83/30767" alt="Moon"
28             target="_blank">
29     </map>

 

posted @ 2022-05-05 21:17  NinFiv  阅读(141)  评论(0)    收藏  举报