Question

在我的网页上，我想要一组不同大小的几个同心圆，每个同心圆都被显示在鼠标上。

到目前为止，我创建了4张100％透明的图片，除了圆圈并将它们叠加在一起。但是，当我将鼠标悬停在圆圈组上时，顶部图像的透明部分会导致鼠标悬停事件触发。我怎么处理这个？

供参考，这是我到目前为止的代码。

<html>
<head>
    <style type="text/css">
        img
        {
            position:fixed;
            left: 0;
            bottom: 0;
        }
    </style>

    <title>Circle Test</title>
</head>
<body>

        <img src="Circle2.png" onMouseover="alert('Button2')"/>
        <img src="Circle4.png" onMouseover="alert('Button4')"/>
        <img src="Circle3.png" onMouseover="alert('Button3')"/>
        <img src="Circle1.png" onMouseover="alert('Button1')"/>
</body>
</html>

Answer 1

对于纯图像来说这很难，因为当鼠标实际上在图像的圆形部分上时很难判断。我建议客户端image map，因为它们允许您定义非矩形形状的可点击区域。将href设置为“javascript：circleClicked（）; void 0;” ：d

Answer 2

无法判断鼠标是否在圆圈的透明像素上：您必须检查鼠标是否与实际圆圈相交（是的，真的）。其实，这是很容易，它看起来。考虑到你圆的直径是图像的宽度（这似乎很可能给我），你只需要检查鼠标光标是圆的半径之内（这将是宽/ 2）：

function intersectsCircle(diameter, center, mousePosition)
{
    var radius = diameter / 2;
    // compute the distance between mousePosition and center
    var deltaX = mousePosition.x - center.x;
    var deltaY = mousePosition.y - center.y;
    return Math.sqrt(deltaX * deltaX + deltaY * deltaY) < radius;
}

而你只需要传递必要的信息（我的Javascript生锈，所以后面的内容可能不完全准确，特别是仔细检查事件部分）：

function intersects(target, event)
{
    var center = {x: target.x + target.width / 2, y: target.y + target.height / 2};
    var mousePosition = {x: event.clientX, y: event.clientY};
    if(intersectsCircle(target.width, center, mousePosition))
        alert('Foo');
}

<img onmouseover="intersects(this, event)" src="circle.png" />

如何使HTML中的同心圆正确响应mouseOver？

2 个答案: