热点地图 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>

浙公网安备 33010602011771号