Question

What is the best way to set up a separate link for each colored circle in my image below?

The goal is to have each colored circle link to a different page and have them not interfere with one another. If I chop them into slices, each image will of course really be a square, thus interfering with the one under it (orange circle into blue circle for example).

I know I can use an imagemap (area). But I prefer a non-imagemap implementation due to a current border bug in chrome for imagemaps, and google’s preference for non-imagemaps (SEO).

Ideas?

EDIT: This image is just a representation of what I actually when design is done, which are a bunch of circles with designs in them, so the image piece is a necessity.

Answer 1

How about something like this: http://jsfiddle.net/avTa8/

(No need for sprites/images, but you’ll need support for border-radius [see http://css3pie.com/ ])

demo only uses border-radius, use -moz-border-radius for FF support, etc.

html

<div id="a" onclick="window.location='http://www.google.com';"></div>
<div id="b" onclick="window.location='http://www.stackoverflow.com';"></div>
<div id="c" onclick="window.location='http://www.stackoverflow.com';"></div>
<div id="d" onclick="window.location='http://www.stackoverflow.com';"></div>
<div id="e" onclick="window.location='http://www.stackoverflow.com';"></div>
<div id="f" onclick="window.location='http://www.stackoverflow.com';"></div>

css

#a:hover,
#b:hover,
#c:hover,
#d:hover,
#e:hover,
#f:hover {
    cursor:pointer;
    background-color:#333;
}

#a {
    position:absolute;
    border-radius:100px;
    background-color:#72CEE0;
    width:100px;
    height:100px;
    left:150px;
}

#b {
    position:absolute;
    border-radius:90px;
    background-color:green;
    width:90px;
    height:90px;
    top:130px;
    left:50px;
}

#c {
    position:absolute;
    border-radius:100px;
    background-color:orange;
    width:100px;
    height:100px;
    top:60px;
    left:85px;
}

#d {
    position:absolute;
    border-radius:80px;
    background-color:red;
    width:80px;
    height:80px;
    top:130px;
    left:210px;
}

#e {
    position:absolute;
    border-radius:80px;
    background-color:purple;
    width:80px;
    height:80px;
    top:200px;
    left:270px;
}

#f {
    position:absolute;
    border-radius:100px;
    background-color:magenta;
    width:100px;
    height:100px;
    top:220px;
    left:150px;
}