如何创建圆形的html / css元素？

Question

创建具有圆形形状的元素的最合理，跨浏览器兼容的方法是什么？ 该元素将是不可见的，但可单击=在背景上已经有图像的背景上，因此，我只需要创建一个不可见的虚构元素即可使背景圆可单击。

该元素不需要是<a>标记，因为单击事件将仅使用jquery进行绑定，并且不需要将任何href发送到浏览器。 因此， div将起作用。 问题是：如何完成其​​余的工作？

编辑

实际上，我需要在每次单击时更改URL，但不是要刷新页面，而是要使URL供用户复制。 因此，如果我可以用jQuery绑定div标签将url从base＃home更改为base＃contact，则一切正常。

编辑2

我不需要jquery代码，我只需要html / css部分来创建元素。

Answer 1

好吧，我可能在这里吠错了树...

要查找圆内的点击，可以使用鼠标位置，然后找到距圆原点的距离。

jQuery非常有用地提供了position() ，该对象返回带有两个变量的对象，这些变量分别显示x和y位置，如果您知道图片有多大，则可以通过使用毕达哥拉斯定理在圆形内单击鼠标来确定。

就像是：

$(document).mousedown(function(e) {

   //img_element is your image...
   var img_pos = $("#img_element").position();

   //these are the coordinates for the center of the circle
   var centerX = img_pos.top + (img_width/2);
   var centerY = img_pos.left + (img_height/2);

   //this is the radius of your circle
   var radius = 100;

   if(Math.sqrt(Math.pow(e.clientX-centerX, 2) + Math.pow(e.clientY-centerY, 2)) < radius) {
       //here we do the things when the click is inside the circle
       console.log("yes");
   }

});

希望这对您有帮助...

Answer 2

非常简单，在您的CSS样式表中引用图像，如下所示：

img {
   border-radius: 50%;
}

这将导致图像显示为圆形。

Answer 3

如果您不介意简单的href：

<img src="background.gif" usemap="#mymap" />

<map name="mymap">
 <area shape="circle" coords="128,64,4" href="destination.htm">
</map>

Answer 4

也许这会给您一个提示： http : //bavotasan.com/2011/circular-images-with-css3/

查看以下CSS属性：

border-radius
-webkit-border-radius
-moz-border-radius