为这些重叠的圆形导航项创建锚点链接？单个图像（精灵）或切片还是？

Question

在下面的图片中为每个彩色圆圈设置单独链接的最佳方法是什么？

目标是让每个彩色圆圈链接到不同的页面，并使它们不会相互干扰。如果我将它们切成片，每个图像当然都是正方形，从而干扰它下面的那个（例如橙色圆圈变成蓝色圆圈）。

我知道我可以使用imagemap（区域）。但我更喜欢非图像映射实现，因为图像地图的chrome目前有边框错误，谷歌偏爱非图像映射（SEO）。

想法？

编辑：这张图片只是我在设计完成时的实际情况，它是一堆带有设计的圆圈，因此图像片段是必需的。

Answer 1

这样的事情：http://jsfiddle.net/avTa8/

（不需要精灵/图像，但你需要支持border-radius [见http://css3pie.com/]）

demo仅使用border-radius，使用-moz-border-radius进行FF支持等。

<强> 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;
}