Antworten auf deine Fragen:
Neues Thema erstellen

css Dreieck verlinken

Nethune

Noch nicht viel geschrieben

Hallo Leute,
ich versuche gerade eine Startseite in Dreiecken zu machen. Dabei sollen die Dreiecke ein Quadrat ergeben.
HTML:
<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>

Code:
 #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?
 

ebene11

Noch nicht viel geschrieben

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

Noch nicht viel geschrieben

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?


HTML:
<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

Noch nicht viel geschrieben

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:
Code:
<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:
Code:
<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

Aktives Mitglied

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:
HTML:
<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

Noch nicht viel geschrieben

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
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.614
Beiträge
1.538.351
Mitglieder
67.525
Neuestes Mitglied
mgtaucher
Oben