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

原文 标签 html css sprite imagemap slice

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

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

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

想法?

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

Navigation

最佳答案

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

(不需要 Sprite /图像,但您需要支持边界半径 [参见 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;
}

关于html - 为这些重叠的圆形导航元素创建 anchor 链接?单个图像( Sprite )或切片或?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6654283/

相关文章:

jquery - 向上滚动和向下滚动事件

jquery - CSS按钮 float 问题

javascript - CSS Sprites 在页面的 HTML 中工作,但不是在 Javascript 中?

通过 CloudFront 加载 CSS 图像 Sprite 的速度比本地加载慢

css - 如何为 Razor forEach 内联复选框设置样式

ios - 我的 Sprites 使用 Swift 在 Sprite Kit 中被压缩

javascript - 选择输入,其中单击事件将滚动浏览一组定义的值,而不是打开下拉菜单

javascript - 基于另一个 javascript 文件定义一个带参数的函数

html - 自动调整列表中图像的高度以始终保持在一行

html - 如果用户未安装Helvetica,如何退回Google Web字体