如何在页面上实现一个圆形的可点击区域

1. map+area
   通过usemap映射到

<img src="images/lanlvseImg.png" usemap="#Map" />    
<map name="Map" id="Map">  
    <area shape="circle" coords="100,100,50" href="http://www.baidu.com" target="_blank"/>  
</map>

1. border-radius（H5）

   
   .circle{
   /圆设置/
   width:100px;
   height:100px;
   border-radius: 50%;
   cursor: pointer;
   /文字设置/
   position: absolute;
   left:50px;
   top:50px;
   line-height: 100px;
   text-align: center;
   color: white;
   background-color:dimgray;
   }
   
   3.js实现，获取鼠标点击位置坐标，判断其到圆点的距离是否不大于圆的半径，来判断点击位置是否在圆内。
   求点在不在圆上的简单算法、获取鼠标坐标等等
   两点之间的距离计算公式

|AB|=Math.abs(Math.sqrt(Math.pow(X2-X1),2)+Math.pow(Y2-Y1,2)))

假设圆心为（100,100）,半径为50，在圆内点击弹出相应的信息，在圆外显示不在圆内的信息

    document.onclick = function(e) {    
        var r = 50;   
        var x1 = 100;  
        var y1 = 100;  
        var x2= e.clientX;  
        var y2= e.clientY;    
        var distance = Math.abs(Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)));    
        if (distance <= 50)  
            alert("Ok!");    
    }