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

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

До сих пор я создал 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>

источник

2010-03-01 samoz

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

источник

2010-03-01 00:59:46

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

источник

2010-03-01 01:14:34 zneak

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

ответ

Смежные вопросы