君语贤
时光静好,与君语;细水流年,与君同;繁华落尽,与君老...

前端设计>html>正文

HTML排版标记-图片热点map标签(图像地图)

2019-05-23 09:31 君语贤html热点图

HTML排版标记-图片热点map标签(图像地图)

图像热点:给一张图片加多个链接,默认情况下,一张图只能加一个链接。

1、标记结构:
<img  src = “images/01.jpg”  usemap = “#Map”  />
<map  id = “Map”  name = “Map”>
       <area  shape = “热区形状”  coords = “热区坐标”  href = “链接地址”  />
       <area  shape = “热区形状”  coords = “热区坐标”  href = “链接地址”  />
       <area  shape = “热区形状”  coords = “热区坐标”  href = “链接地址”  />
</map>
2、<area>标记的常用属性
Shape:热区的形状,取值:rect(矩形)、circle(圆形)、polygon(多边形)
Coords:执区的坐标(位置)
如果 shape = rect 时,那么,coords = “x1,y1,x2,y2” 例如:coords = “50,50,200,150”
(x1,y1)为矩形左上角的坐标值,(x2,y2)为矩形右下角的坐标值
如果 shape = circle 时,那么, coords = “x,y,r” ,其中(x,y)为圆心坐标,r为半径



本文链接:https://www.weguiding.com/html/445.html