Создать якорные ссылки для этих элементов круговой навигации? Одно изображение (спрайт) или кусочки или? - PullRequest
Новая
       21

Создать якорные ссылки для этих элементов круговой навигации? Одно изображение (спрайт) или кусочки или?

1 голос
/ 11 июля 2011

Как лучше всего создать отдельную ссылку для каждого цветного круга на моем изображении ниже?

Цель состоит в том, чтобы каждый цветной круг имел ссылку на отдельную страницу и не мешал друг другу.,Если я нарежу их на кусочки, каждое изображение, конечно же, будет квадратным, что мешает изображению под ним (например, оранжевым кружком в синем кружке).

Я знаю, что могу использовать карту изображений (область),Но я предпочитаю реализацию не-imagemap из-за текущей ошибки границы в Chrome для картинок изображений и предпочтения Google для не-картирования карт (SEO).

Идеи?

РЕДАКТИРОВАТЬ: Это изображение простопредставление того, что я есть на самом деле, когда закончен дизайн, которые представляют собой группу кругов с рисунками в них, поэтому фрагмент изображения является необходимостью.

Navigation

1 Ответ

1 голос
/ 11 июля 2011

Как насчет этого: http://jsfiddle.net/avTa8/

(Нет необходимости в спрайтах / изображениях, но вам потребуется поддержка border-radius [см. http://css3pie.com/])

В демонстрации используется только 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>

1020 * 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;
}
...