Teilebereich aus Kreis verlinken

tsaenger

Hallo zusammen,

ich habe mittels CSS mehrere Übereinanderliegende Kreise erstellt.

Code

#mitte4 {




position: absolute;
top: 584px;
left: 326px;
width: 1680px;
height: 1556px;
-webkit-border-radius: 0px 0px 300px 300px;
-moz-border-radius: 0px 0px 300px 300px;
border-radius: 100%;
}
#mitte5 {




position: absolute;
top: 334px;
left: 134px;
width: 2090px;
height: 2060px;
-webkit-border-radius: 0px 0px 300px 300px;
-moz-border-radius: 0px 0px 300px 300px;
border-radius: 100%;
}




<a href="http://www.web4.de"><div id="mitte5"></div>
</a>
<a href="http://www.web3.de"><div id="mitte4"></div>
</a>
<a href="http://www.web2.de"><div id="mitte3"></div>
</a>
<a href="http://www.web1.de"><div id="mitte2"></div>
</a>
<a href="http://www.web.de"><div id="mitte"></div>
</a>

Alles anzeigen

Nun würde ich gerne nur einen Teilbereich des Außenrandes des Kreises verlinken. Mit meiner obigen Methode kann ich aber nur immer den kompletten Rand (Überlappung) verlinken.
Hat jemand von euch eine Idee wie ich hier noch unterteilen kann?
Vielen Dank

Gruß
Tobias

tsaenger

Hallo zusammen,

ich habe es nun geschafft mit CSS Teilstücke zu erstellen:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">




#piechart {
position: relative;
width: 1322px;
height: 1322px;
margin-left: 100px;
margin-top: 100px;
}
.piece {
position: absolute;
width: 1322px;
height: 1322px;
clip: rect(0px, 1322px, 1322px, 661px);
border-radius: 661px;
}
.piece-inner {
position: absolute;
width: 1322px;
height: 1322px;
clip: rect(0px, 661px, 1322px, 0px);
border-radius: 661px;
/*-webkit-backface-visibility: hidden;*/
}
/* Spezifische Einstellungen */
#piece1 {
transform: rotate(0deg);
}
#piece1 > .piece-inner {
background: red;
transform: rotate(60deg);
}
#piece2 {
transform: rotate(60deg);
}
#piece2 > .piece-inner {
background: blue;
transform: rotate(60deg);
}
#piece3 {
transform: rotate(120deg);
}
#piece3 > .piece-inner {
background: green;
transform: rotate(60deg);
}
#piece4 {
transform: rotate(180deg);
}
#piece4 > .piece-inner {
background: yellow;
transform: rotate(60deg);
}
#piece5 {
transform: rotate(240deg);
}
#piece5 > .piece-inner {
background: black;
transform: rotate(60deg);
}
#piece6 {
transform: rotate(300deg);
}
#piece6 > .piece-inner {
background: white;
transform: rotate(60deg);
}
</style>
<title>Unbenanntes Dokument</title>
</head>




<body>
<div id="piechart">
<div id="piece1" class="piece">
<div class="piece-inner"></div>
</div>
<div id="piece2" class="piece">
<div class="piece-inner"></div>
</div>
<div id="piece3" class="piece">
<div class="piece-inner"></div>
</div>
<div id="piece4" class="piece">
<div class="piece-inner"></div>
</div>
<div id="piece5" class="piece">
<div class="piece-inner"></div>
</div>
<div id="piece6" class="piece">
<div class="piece-inner"></div>
</div>




</div>
</body>
</html>

Alles anzeigen

Jetzt hänge ich wieder, da ich die erstellten Stück leider nicht mit einem Link versehen kann. Hat da jmd eine Idee wie das gehen könnte?

Vielen Dank.

Tobias

Sempervivum

Eine Möglichkeit könnte sein, die Kreissegmente mit jCanvas zu zeichnen (was einfacher und übersichtlicher sein dürfte als CSS) und die Mousevents zu verwenden:
http://projects.calebevans.me/jcanvas/docs/mouseEvents/

Oder Google Charts und das select-Event zu verwenden:
http://stackoverflow.com/questions/6648…tion-line-chart

Basi

Du könntest auch ersetzen. Und zwar:

HTML

<div class="piece-inner"></div>

...durch...

HTML

<a class="piece-inner"></a>

Dann dementsprechend das a-Element mit CSS manipulieren.

Jetzt mitmachen!