html5在图片中创建热点区域,为图片设置热点区域之<map> <area>

在开发的过程中经常会遇到对图片上某区域进行操作，此时就要上场了。

复制代码

中的 usemap 属性可引用 中的 id 或 name 属性(取决于浏览器)，所以我们应同时向 添加 id 和 name 属性。

需要在内部使用，用来定义图片中的热点区域。

shape属性用来定义热点区域的形状，有下面四个值：default：全部区域

圆形：circ 或 circle

多边形：poly 或 polygon

矩形：rect 或 rectangle

注释：由于区域在 标签中是采用“先来先得”的顺序，所有必须将默认区域放置在后面。否则，默认区域会覆盖其他的图像映射中出现的所有区域。

coords属性规定区域的 x 和 y 坐标，与shape属性配合使用，规定区域的形状，大小，位置。圆形：coords="x,y,z"

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

多边形：coords="x1,y1,x2,y2,x3,y3,..."

每一对 "x,y" 坐标都定义了多边形的一个顶点("0,0" 是图像左上角的坐标)，如果第一个坐标和最后一个坐标不一致，那么为了关闭多边形，浏览器必须添加最后一对坐标。

矩形：coords="x1,y1,x2,y2"

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

注释：如果某个 area 标签中的坐标和其他区域发生了重叠，会优先采用最先出现的 area 标签。浏览器会忽略超过图像边界范围之外的坐标。