代码之家 › 专栏 › 技术社区 › foobarfuzzbizz

如何使HTML中的同心圆正确响应mouseover?

css html

foobarfuzzbizz · 技术社区 · 14 年前

在我的网页上,我想要一组大小不同的同心圆,每一个都在鼠标悬停时显示一个菜单。

到目前为止,我已经创建了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>

2 回复 | 直到 14 年前

Gordon Gustafson 14 年前

对于纯图像来说,这很难做到,因为很难知道鼠标何时实际位于图像的圆形部分。我建议客户方 image map 它们允许您在非矩形形状中定义可单击区域。将href设置为“javascript:CircleClicked();void 0;”:d

zneak 14 年前

没有办法告诉你鼠标在一个透明的圆形像素上:你必须检查房子是否与实际的圆形相交(是的,真的)。实际上,这是一个很明显的信号。考虑到你的循环“是对你的边缘”的旋转(这些都是不可能的),你必须检查房子的光标。或者是圆的半径(宽度为/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;
}

160; 160194160194160\160194160160194160\160160194160160194160\194\\160;\\\194\160160\194\160\160\160\194\\\160160160160活动部分:

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" />

推荐文章

Softly · 单选按钮未按预期取值

1 年前