Question

我想点击图片的圆圈区域，即jpg或png。无论如何不使用imagemap吗？

这个可点击的图像是可见的，点击该图像的中心后，我想显示另一个带有弹出式新窗口的图像。

这个页面是html，所以最好用JavaScript做。

我忘记了，图像呈圆形，并且始终保持跨越。我认为这可能会带来一些麻烦。

Answer 1

假设您已经知道如何获取鼠标坐标，并知道图像的绝对或相对坐标及其尺寸，您可以像这样检查圆形鼠标点击：

图像有一个中心点，你可以通过

找到它

centerx = image.x + image.width / 2;
centery = image.y + image.height / 2;

当然，如果图片是正方形或圆形，image.width和image.height相等。

然后，您可以使用鼠标坐标mx和my执行以下操作：

//using the Pathagorean Theorem to find the distance 
//between the center point and mouse coordinates
dist = Math.sqrt( (mx - centerx)^2 + (my - centery)^2 );

//checking to see if the distance is less than the radius of the circle
if (dist < image.width / 2){
    //the mouse clicked on the circle
}

注意：我可能在代码中拼错了一些变量/方法，但是，一般的想法仍然存在

编辑：故障排除

如果此方法产生的结果不准确，很可能是对此解决方案的假设不正确。有几件事可能是错的：

（1）图像不是正方形。如果图像不是正方形，因为它的宽度不等于它的高度，那么这种方法不会起作用。

（2）鼠标坐标与图像坐标的比例不同。起初可能会发生这种情况似乎很奇怪，但是在我为我的图像设置了不同的坐标系并且为鼠标坐标设置了另一个坐标系之前，我已经完成了这项工作。在这种情况下，您必须将鼠标坐标转换为图像的坐标平面（反之亦然：将图像坐标和尺寸转换为鼠标坐标的坐标平面）。

（3）另一件可能出错的事情是Math.sqrt由于四舍五入和东西而给出了不准确的结果。如果是这种情况，请跳过sqrt步骤，然后对半径进行平方。所以代码看起来像这样：

dist2 = (mx - centerx)^2 + (my - centery)^2;   
//checking to see if the distance is less than the radius of the circle
if (dist2 < (image.width / 2)^2 ){
    //the mouse clicked on the circle
}

这对负值不起作用，但无论如何你的所有距离都是积极的，所以它应该起作用

Answer 2

如果像这样的东西可行，你可能不需要编写脚本。

http://jsfiddle.net/isherwood/y8GH6/2

.img-wrapper {
    position: relative;
}
.img-circle-link {
    position: absolute;
    top: 70px;
    height: 200px;
    left: 80px;
    width: 200px;
    border-radius: 50%;
}

<div class="img-wrapper">
    <a href="#"><div class="img-circle-link"></div></a>
    <img src="http://placekitten.com/400/400" />
</div>

为了清晰起见，

为演示添加了背景颜色。

单击图像的特定区域

2 个答案: