1

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.

Frantisek
  • 7,485
  • 15
  • 59
  • 102
  • Will specifying a method for creating a circle-shaped div be enough, or do you want the jQuery stuff too? – please delete me Oct 24 '11 at 23:27
  • is the position for the circle absolute? or does it move when the size of the window changes, etc. – whg Oct 24 '11 at 23:28
  • I can handle the jquery part, yeah, I just need to create the elements. The position is absolute relatively to the parent element, which also has absolute position. Btw, @Mahnax, I just realized you're the guy whose question (http://english.stackexchange.com/questions/45911/is-it-acceptable-to-mix-latin-with-english) I answered over at english.SE recently. Oh well, the internet is so small ... – Frantisek Oct 24 '11 at 23:35
  • @RiMMER I recognized you as well! – please delete me Oct 25 '11 at 00:10

4 Answers4

5

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...

whg
  • 884
  • 1
  • 5
  • 13
  • This is a novel solution. The only thing I would add is that instead of hardcoding `$("#img_element").position()` you could do `$(e.target).position()` provided that you put the mousedown handler not on document but on the elements that should have the circular hotspot. – Erik Hinton Oct 25 '11 at 00:22
  • Thanks, this helped me a lot! I'll be happy to show you the end result when it's finished (in a few days). Thanks again! – Frantisek Oct 26 '11 at 02:38
  • Dammit! The centerX and centerY don't correlate to top and left! Please check and fix the answer! Wasted half an hour due to mindless copy-paste (( – Konstantin Jun 11 '15 at 20:30
0

Very easy, in your css stylesheet reference the image like so:

img {
   border-radius: 50%;
}

this will cause the image to appear circular.

Cole Jurden
  • 131
  • 1
  • 7
0

If you don't mind a simple href:

<img src="background.gif" usemap="#mymap" />

<map name="mymap">
 <area shape="circle" coords="128,64,4" href="destination.htm">
</map>
philipd
  • 153
  • 7
  • This won't work, as there is no ```` tag in my code. Only ``body`` with ``body{ background: url("img.jpg"); }`` – Frantisek Oct 24 '11 at 23:30
  • Is it possible to overlay a transparent image? – philipd Oct 24 '11 at 23:36
  • @RiMMER If you can handle the jquery just add a img tag with it. – M Brown Oct 24 '11 at 23:37
  • @philipd It is, but it seems like a waste of resources and code = not a very good approach. Don't you agree? – Frantisek Oct 24 '11 at 23:37
  • @MBrown I can do that, if it's the best possible approach. – Frantisek Oct 24 '11 at 23:38
  • @RiMMER I don't think it is much of a waste if you can't edit the html. And you are going to change the link with each click without refreshing the page so you are already using jquery for that. Personally I'd remove the circle from the background and make the circle an alpha transparent png overlay with a click event or link. Another idea is using javascript to check where in the element they clicked and see if that intersects with a predefined circle area. – M Brown Oct 24 '11 at 23:44
  • @RiMMER note that the png overlay doesn't give you a perfect circle click area. – M Brown Oct 24 '11 at 23:46
  • @RiMMER you can use a 1x1 pixel image and resize with `height` and `width`. No question it's a kludge, but image map still works, at least in FF7. YMMV. – philipd Oct 24 '11 at 23:50
0

Maybe this will give you a hint: http://bavotasan.com/2011/circular-images-with-css3/

Look into these CSS attributes:

border-radius
-webkit-border-radius
-moz-border-radius
jm.
  • 23,422
  • 22
  • 79
  • 93
  • Unfortunately this is not cross-browser (if you must support ie7, ie8). http://stackoverflow.com/questions/635851/support-for-border-radius-in-ie – M Brown Oct 24 '11 at 23:50