javascript - click particular region of image -

javascript - click particular region of image -

i want click circle part of image, jpg or png. there anyway without using imagemap?

this clickable image visible, after click center of image, want display image popup style new windows.

this page html, improve javascript.

i forget metion, image in circle shape, , maintain spanning time. think might bring trouble.

assuming know how mouse coordinates, , know absolute or relative coordinates of image , dimensions, can check circle mouse clicks so:

the image has center point, can find doing

centerx = image.x + image.width / 2; centery = image.y + image.height / 2;

of course, image.width , image.height equal if image square or circle.

then can take mouse coordinates mx , my following:

//using pathagorean theorem find distance //between center point , mouse coordinates dist = math.sqrt( (mx - centerx)^2 + (my - centery)^2 ); //checking see if distance less radius of circle if (dist < image.width / 2){ //the mouse clicked on circle }

note: may have misspelled of variables/methods in code, still, general thought there

edit: problem shooting

if method producing inaccurate results, assumptions made solution incorrect. there several things wrong:

(1) image not square. if image not square, in width not equal height, method won't work.

(2) mouse coordinates aren't on same scale image coordinates. might seem unusual @ first happen, i've done before have different coordinate scheme images , 1 mouse coordinates. in case, have convert mouse coordinates coordinate plane of image (or vice versa: convert image coordinates , dimensions coordinate plane of mouse coordinates).

(3) thing go wrong math.sqrt giving inaccurate results due rounding , stuff. if case, skip sqrt step , square radius. code this:

dist2 = (mx - centerx)^2 + (my - centery)^2; //checking see if distance less radius of circle if (dist2 < (image.width / 2)^2 ){ //the mouse clicked on circle }

this doesn't work negative values, distances going positive anyway should work

javascript html