css Dreieck verlinken

[Nethune]

Hallo Leute,
ich versuche gerade eine Startseite in Dreiecken zu machen. Dabei sollen die Dreiecke ein Quadrat ergeben.

<a href="789.html">
<div id="dreieck_oben">  </div>
</a>
<div id="dreieck_rechts"></div>
<a href="as">
<div id="dreieck_links"></div>
</a>
<a href="#">
<div id="dreieck_unten">     </div>
</a>

 #dreieck_unten {
     width: 0;
  height: 0;
  border-left: 300px solid transparent;
  border-right: 300px solid transparent;
  border-bottom: 300px solid #00ff00;
  position: absolute;
  content: "";
  top: 300px;
  left: 0px;
 

}
#dreieck_oben{
width: 0;
  height: 0;
  border-left: 300px solid transparent;
  border-right: 300px solid transparent;
  border-top: 300px solid #ffc800;
  position: absolute;
  content: "";
  top: 0px;
  left: 0px;
 
}

   


#dreieck_links{
    width: 0;
height: 0;
border-top: 300px solid transparent;
border-left: 300px solid #F00;
border-bottom:300px solid transparent;
    position: absolute;
  content: "";
  top: 0px;
  left: 0px;
}


#dreieck_rechts{
width: 0px;
height: 0px;
border-top: 300px solid transparent;
border-right: 300px solid #399;
border-bottom: 300px solid transparent;


  position: absolute;
  content: "";
  top: 0px;
  left: 300px;
 
}

nun der schwere Teil
ich möchte zb. nur das grüne Dreieck verlinken ohne, das die anderen davon betroffen sind und nicht angesprochen werden.

Hättet ihr eine Idee wie das geht?

 

[lachender_engel]

Vielleicht hilft Die die dabei?!

 

[ebene11]

Auch wenn du über die Rahmen rein optisch Dreiecke erzeugst, so bleiben die Links nachwievor rechteckige Boxen. Letztere überlappen bei dir in der Reihenfolge, wie sie im Quellcode auftauchen.

Die von lachender_engel vorgeschlagene Image-Map wäre eine Möglichkeit oder je nach Anwendungsfall eleganter/zielführender eine SVG. (http://www.selfsvg.info)

 

[Nethune]

danke euch beiden für die hilfreichen Tips.

@ ebene11 genau das war mein Problem mit den überlappen

eine SVG scheint auf anhieb die einfachere Lösung zu sein
aber Interessehalber
Wie mache ich das mit der sensitive Grafike?

<map name="dreieck_oben">
    <area shape="rect" coords="20,70,40,100"
          href="#">
 </div>

ich habe hier die id vom oberen Dreieck und würde die
sensitive Grafike einfach ins Div schreiben nur da hapert es…
hättet ihr noch ein Tip für mich

 

[ebene11]

Tip: Am besten nochmal den Link von lachender_engel in Ruhe durchlesen. ;-)

Du brauchst ein Bild, welchem die Map zugewiesen wird (Attribut 'usemap'), z.B. so:

<img src="deinBild" width="600" height="600" alt="" usemap="dreiecke" />

Und natürlich die Map selber. Einem Bild kann eine Map zugewiesen werden, also werden alle Regionen (in deinem Fall die Dreiecke) in einer Map definiert. Da Dreiecke keine Rechtecke sind, wirst du mit rect nicht glücklich, sondern nimmst besser poly - z.B. so:

<map name="dreiecke">
<!-- Dreieck oben -->
<area shape="poly" coords="0,0,300,300,600,0" href="">
<!-- Dreieck rechts -->
<area shape="poly" coords="600,0,300,300,600,600" href="">
<!-- hier kannst du beliebig viele weitere shapes einfügen -->
</map>

 

[owieortho]

Du musst nur eine Grafik mit allen Deinen Dreiecken erzeugen und diese dann als Imagemap hernehmen. So hast Du nicht das Problem, dass sich irgendwelche Teile, auch wenn sie nicht sichtbar sind, weil sie in der Hintergrundfarbe oder transparent dargestellt werden, überlappen und ggf nur das oberste erreichbar ist.
Für ein Quadrat mit einem Dreieck links oben und einem rechts unten sähe das Markup so aus:

<img src="bild_diagonal_geteiltes_rechteck.jpg" width="100" height="100" alt="" usemap="#map_name">
 
<map name="map_name">
  <area shape="poly" coords="0,0,100,0,0,99" href="a.html" alt="oben links">
  <area shape="poly" coords="0,100,100,100,100,1" href="b.html" alt="unten rechts">
</map>

sorry, hatte etwas gedauert, daher wiederholt sich inhaltlich der vorige Post.

Gruß
O.

 

[Nethune]

oh, ich dachte das geht auch ohne "karte" bzw. Bilder …
eigentlich wollte ich ohne Bilder arbeiten aber in diesem Fall ist es vielleicht das Beste


danke an alle für die Hilfe