html - 为这些重叠的圆形导航项创建 anchor 链接？单个图像( Sprite )或切片或？

Question

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

目标是让每个彩色圆圈链接到不同的页面，并且让它们不会相互干扰。如果我将它们切成薄片，每个图像当然都是一个正方形，因此会干扰其下方的图像(例如，橙色圆圈变成蓝色圆圈)。

我知道我可以使用图像映射(区域)。但我更喜欢非图像映射实现，因为 chrome 中当前图像映射的边框错误，以及谷歌对非图像映射 (SEO) 的偏好。

想法？

编辑:这张图片只是我完成设计时的实际表现，它是一堆带有设计的圆圈，所以图片是必需的。

Answer 1

像这样的东西怎么样:http://jsfiddle.net/avTa8/

(不需要 sprites/images，但你需要支持 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;
}