Navigation mit Parallelogrammen

[peat-ar]

Der Titel sagt eh schon fast alles. Ich (eig. ein Kunde, der das Design seiner alten Visitenkarte auf die Website umgelegt haben möchte) würde gerne eine Navigation à la:
...._________________
.../........../........../........../
../........../........../........../
./____ /_____/ _____/

bauen (zu meinen "Zeichenkünsten" dürft ihr mir nachher gratulieren ).

Frage: Wie würdet ihr das lösen (es gibt ja leider nur rechteckige Bilderformate ^^), außerdem soll es einen Hover-Effekt (beim Bild, nicht beim daraufliegenden Text) geben, der das Bild ändert.

Ich dachte vllt mit DOM, also einfach Bilder (vllt als bg von div-Bereich mit Text drüber ?) und dann Abstand nach links halt festlegen (bin mir aber bei der Lösung bezüglich HoverEffekt nicht so sicher, da sich die Bilder da ja dann zwangsläufig überlagern, erzeugt ein MouseOver bei einem transparenten Teil eines GIFs auch eine Reaktion?)

Meine zweite Lösung wäre ganz primitiv aber auch unglaublich umständlich und nicht gerade flexibel: einfach in Rechtecke aufteilen:
______
.../
../
./_____

so in etwa, ist aber ziemlich kompliziert wenn ich Bilder ändern will, da ich ja dann immer 2 ändern muss und auch dementsprechend mehrere Varianten der Bilder brauche.

Hat jemand noch weitere Lösungsansätze zu dieser Problematik? (bzw Information bez. DOM-Lösung, Browser-Kompatiblität und MouseOver bei transparenten/sich überlagernden Bildabschnitten)

Wäre sehr dankbar für jeden hilfreichen Beitrag

PS.: Punkte dienen nur als Platzhalter

[toosten]

Verweis-sensitive Grafiken definieren
Für MouseOver kannst du dann extra Grafiken positionieren.

Hier ein Map-Beispiel:
SELFHTML: HTML/XHTML / Grafiken / Verweis-sensitive Grafiken (Image Maps)

[shin10]

hi peat-ar,

du kannst dir mal das hier ansehen. das hab ich vorletzte woche gemacht. zwei/drei bilder sind nicht optimal ...

wegen der schrift wurde jeder menüpunkt einzeln als bild gesetzt. kann man natürlich auch mit einem bild und text drüber machen, wenn es die schrift erlaubt. (empfehlenswert!)

das dumme an der sache mit der transparenz ist, dass der ie6 mit transparenten pngs nicht klar kommt; noch ein grund, warum wir jedes einzeln haben, da sich die wellenlinie mit dem menü überschneidet. also eigentlich haben wir gar keine transparenz, auch wenn es so aussieht.

schau's dir einfach mal an. wenn du fragen hast, nur raus damit. aber eines vorweg: sag ihm, dass das nicht so billig wird, wegen des extraaufwands...
da kannst schon ein paar stunden mehr rechnen

mfg

sx

[peat-ar]

@shon10: Was genau finde ich hier? (bez. Parallelogrammen) muss ich mich da bei Demos eintragen?

@toosten: werde ich auf jeden Fall in Erwägung ziehen...MouseOver mit Sprites?

@Alle: Was haltet ihr von der CSS3 Eigenschaft "skrew"? Wie verbreitet ist CSS3 schon? Hab gehört der IE hinkt da ziemlich hinterher, aber den kann man ja aufgrund seiner Marktanteile nicht einfach so vernachlässigen

[shin10]

ne, nix eintragen.

da findest du mein letztes css-dropdown-menü in aktion. das ist alles. wenn du dir mal den quellcode und die css dateien dazu ansiehst, kannst du dir in etwa vorstellen, was auf dich zukommt. wobei du dann jeden unterpunkt noch so anpassen musst, dass er auch seitlich verschoben wird.

css-dateien:
menu.css
menu_ie6.css

vorteil an der sache ist, dass es bis ie6 abwärtskompatibel ist. nachteil, dass der bereich des schattens noch zum menü dazugehört und es dort noch nicht wieder zuklappt. von den ganzen einzelfällen mal abgesehen.


btw: skew nicht skrew