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

首页>前端设计>html>正文

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

2019-05-23 标签:html热点图

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

1、标记结构:
<imgsrc=“images/01.jpg?x-oss-process=image/resize,w_700,limit_1/format,webp”usemap=“#Map”/>
<mapid=“Map”name=“Map”>
<areashape=“热区形状”coords=“热区坐标”href=“链接地址”/>
<areashape=“热区形状”coords=“热区坐标”href=“链接地址”/>
<areashape=“热区形状”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为半径



图文推荐
    热门标签
    float换行脱离文档流文档流浮动标签嵌套inline-blockblockinline类型转换元素行内元素样式重置html5xmlxhtml开发工具HTML开发图标调用ico图标