Question

What would be the most rational, cross-browser compatible way to create an element which has a shape of a circle? This element will be invisible, but clickable = it will be over a background which already has the image on it, so I just need to create an invisible, imaginary element to make the background circle clickable.

The element doesn’t need to be <a> tag, as the click events will be bound using jquery only and don’t need to send any href to the browser. Therefore a div will do. The question is: how to accomplish the rest?

EDIT

Actually, I need to change the url with each click, but not to refresh the page, but to have the url available for users to copy. Therefore if I can bind the div tag with jquery to change the url from base#home to base#contact, then all is OK.

EDIT2

I don’t need the jquery code, I just need the html/css part to create the elements.

Answer 1

Ok I might be barking up the wrong tree here…

To find clicks inside a circle, you could use the mouse postion, and then find the distance from your circle’s origin.

jQuery very helpfully provides position() which returns an object with two variables which show the x and y position, if you know how big your picture is then you can work out if the mouse click in inside the circle using Pythagoras’ theorem.

Something like:

$(document).mousedown(function(e) {

   //img_element is your image...
   var img_pos = $("#img_element").position();

   //these are the coordinates for the center of the circle
   var centerX = img_pos.top + (img_width/2);
   var centerY = img_pos.left + (img_height/2);

   //this is the radius of your circle
   var radius = 100;

   if(Math.sqrt(Math.pow(e.clientX-centerX, 2) + Math.pow(e.clientY-centerY, 2)) < radius) {
       //here we do the things when the click is inside the circle
       console.log("yes");
   }

});

Hope this helps you…