Как сделать так, чтобы концентрические круги в HTML правильно реагировали на mouseOver? - PullRequest
Новая
       2

Как сделать так, чтобы концентрические круги в HTML правильно реагировали на mouseOver?

0 голосов
/ 01 марта 2010

На моей веб-странице я хотел бы иметь группу из нескольких концентрических кругов разного размера, каждый из которых отображает меню, когда они наведены.

Пока что я создал 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 ]

2 голосов
/ 01 марта 2010

Невозможно сказать, что мышь находится над прозрачным пикселем вашего круга: вы должны проверить, пересекается ли мышь с реальным кругом (да, действительно). На самом деле, это проще, чем это может показаться. Учитывая диаметр вашего круга является шириной вашего изображения (что представляется вполне возможным для меня), вы просто должны проверить, что курсор мыши находится в пределах радиуса окружности (которая будет шириной / 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" />
2 голосов
/ 01 марта 2010

Это было бы трудно для чистых изображений, так как трудно определить, когда мышь на самом деле находится над частью круга изображения. Я бы предложил клиентскую сторону карту изображения , поскольку они позволяют определять интерактивные области в непрямоугольных формах. Установите для href что-то вроде "javascript: circleClicked (); void 0;" : D

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...