HTML图片热区map area详解

最近在给公司写一款嵌入到App的电子报读报功能,因为需要在电子报点击跳转,思考许久,决定使用图片热区<map>来完成。

结构:


<map name="map" id="map">

<area shape="circ" coords="180,139,14" href ="circ.html" alt="circ" /> //圆形

<area shape="rect" coords="0,0,192,232" href ="rect.html" alt="rect" /> //矩形

<area shape="poly" coords="0,0,110,260,110,500," href ="poly.html" alt="poly" /> //多边形

</map>

shape属性指感应区形状:

circ=圆,rect=矩形,poly=多边形

coords属性是指感应区坐标:

圆形:shape=”circ”,coords=”x,y,z”

这里的 x 和 y 定义了圆心的位置(”0,0″ 是图像左上角的坐标),r 是以像素为单位的圆形半径。

矩形:shape=”rect”,coords=”x1,y1,x2,y2″

第一个坐标是矩形的一个角的顶点坐标,另一对坐标是对角的顶点坐标,”0,0″ 是图像左上角的坐标。请注意,定义矩形实际上是定义带有四个顶点的多边形的一种简化方法。

多边形:shape=”poly”,coords=”x1,y1,x2,y2,x3,y3,…”

每一对 “x,y” 坐标都定义了多边形的一个顶点(”0,0″ 是图像左上角的坐标)。定义三角形至少需要三组坐标;高纬多边形则需要更多数量的顶点。

多边形会自动封闭,因此在列表的结尾不需要重复第一个坐标来闭合整个区域。

演示地址(手机展示更完美):中国食品报(电子报)

转载请注明来源:开发猿 » HTML图片热区map area详解

赞 (1) 打赏

觉得文章有用就打赏一下哦

支付宝扫一扫打赏

微信扫一扫打赏