内容导读

shape：表示热点区域的形状，支持rect（矩形），circle（圆形），poly（多边形） coords：表示热点区域的坐标，(0,0)表示图片左上角。rect四个值分别表示左上角坐标和右下角坐标。circle三个值分别表示圆心坐标和半径。poly有若干个值，每两个表示一个坐标点。

1. map和area

<img src="./peppa.png" usemap="#Map"><map name="Map" id="Map"> <area shape="circle" coords="200,200,100" href="#rect" alt="圆形"></map>

将img和map标签连起来的是usemap，它的值是map的id

area属性：

shape：表示热点区域的形状，支持rect（矩形），circle（圆形），poly（多边形）

coords：表示热点区域的坐标，(0,0)表示图片左上角。rect四个值分别表示左上角坐标和右下角坐标。circle三个值分别表示圆心坐标和半径。poly有若干个值，每两个表示一个坐标点。

href：表示链接到某个地址，和<a>标签差不多

alt：对该区域描述，类似于<img>的alt

2. CSS3的border-radius属性

<div class="content"></div>.content{ width: 100px; height: 100px; border-radius: 50%; border: 1px solid #ccc;}var content = document.getElementsByClassName("content")[0]content.addEventListener("click",function(){ alert("aaa")})

3. js实现

原理：设定一个坐标原点和半径，获取鼠标的x,y轴位置，当鼠标的位置与原点的位置不超过半径时，可点击（参照数学知识）

document.onclick = function(e){ let [x,y,r] = [100,100,100] // x,y为坐标原点，r为半径 let x1 = e.clientX; // 获取x坐标 let y1 = e.clientY; // 获取y坐标 let dis = Math.abs(Math.sqrt((Math.pow(x-x1,2)+Math.pow(y-y1,2)))) if(dis<r){ alert("bbb") }}

Math.abs()：取绝对值

Math.sqrt()：开平方

Math.pow(num,n)：num的n次方