ansaurus

Question

How can I make concentric circles in HTML respond to mouseOver properly?

Answer 1

+2 A:

This would be hard with pure images as it's difficult to tell when the mouse is actually over the circle part of the image. I would suggest a client side image map as they let you define clickable areas in non-rectangular shapes. Set the href to something like "javascript:circleClicked(); void 0;" :D

CrazyJugglerDrummer 2010-03-01 00:59:46

Answer 2

+2 A:

There's no way to tell that the mouse is over a transparent pixel of your circle: you must check if the mouse intersects with the actual circle (yeah, really). Actually, that's easier than it might seem. Considering your circle's diameter is your image's width (which appears quite possible to me), you just have to check that the mouse cursor is within the radius of the circle (which would be width / 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;
}

And the you just have to pass the required informations (my Javascript's rusty so what follows might not be exactly accurate, especially double-check the events part):

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

zneak 2010-03-01 01:14:34

ansaurus

tags:

views:

answers:

How can I make concentric circles in HTML respond to mouseOver properly?

related questions