HTML 经典实践用例

实现圆形点击区域

• 纯 HTML 实现：使用 map、area 给图像标记热点。map 用来定义客户端图像映射，area 用来定义映射中的区域（矩形、圆形、多边形）。area 必须写在 map 内部（不必是直接子元素）。
• 纯 CSS 实现：使用 border-radius。当元素宽高相等，且 border-radius 等于边长的一半时，点击区域就是一个圆。
• 纯 JavaScript 实现：监听文档的点击事件，取得每次点击的鼠标位置，判断该点是否落在规定的圆形内。

<img src="https://my-files-1259410276.cos.ap-chengdu.myqcloud.com/md_images/金枝玉叶.png" usemap="#IMG">

<map id="IMG" name="IMG">
    <area shape="rect" coords="0,0,200,200" href="https://www.google.com" target="blank" title="www.google.com">
    <area shape="circle" coords="300,160,120" href="https://www.baidu.com" target="blank" title="www.baidu.com">
    <area shape="poly" coords="400,0,500,100,600,300,550,250,350,150,400,0" href="https://www.huaban.com" target="blank" title="www.huaban.com">
</map>

查看图像映射 Demo

Demo 里用 SVG 叠了一层轮廓，方便看出矩形、圆形、多边形的范围。示例中的 target="blank" 会打开名为 blank 的窗口；规范写法是 target="_blank"。

map

map 用来和其他元素一起定义图像映射（可点击的链接区域）。

name 给这份映射起名，以便被引用。该属性必须存在，且必须是不含空格的非空值，也不能和同一文档里另一张 map 的 name 相同。如果同时写了 id，id 必须和 name 相同。

图片通过 usemap 关联热点，其值对应 map 的 name 或 id（写成 #IMG 这种带 # 的形式）。出于兼容性考虑，最好 id 和 name 都写上。例如 Chrome 实际按 name 来匹配。

area

area 在热点里定义一块几何区域，以及这块区域对应的超链接。

• shape：定义热点的形状。

  • rect：矩形。
  • circle：圆形。
  • poly：多边形。
  • default：未被其他形状覆盖的剩余整图区域。

• coords：按 shape 给出大小、形状和位置，数值单位是 px。

  • rect 对应 x1,y1,x2,y2，指定矩形左上角和右下角。
  • circle 对应 x,y,radius，指定圆心和半径。
  • poly 对应 x1,y1,x2,y2,...,xn,yn，指定多边形各顶点。若首尾坐标不同，浏览器会补上最后一个点来闭合。
  • default 不需要 coords，写了也无效。

• href：这块区域的超链接目标，必须是有效 URL。可以省略；省略则该 area 不代表超链接。

注意：area 必须有一个 map 祖先，但不一定是直接父元素。

注意：多个 area 的坐标如果重叠，优先采用文档中最先出现的那一块。超出图像边界的坐标会被浏览器忽略。

注意：用 Tab 键可以依次聚焦到各个 area 区域。