Hilfe bei Hover-Navigation

[eLement]

Ich habe ein kleines Problem mit einer Navigation.



Wie man hier auf diesem Bild erkennen kann, sind die jeweiligen Links nicht gerade sondern leicht schräg.
Nun versuche ich seit fast 6 Stunden einen Weg zu finden daraus eine passende Hover-Navigation zu bauen. Egal was auch immer ich versuche ich komme einfach nicht dazu, dass später bei allen Links auch das komplette Hintergrundbild angezeigt wird.

Vielleicht hat ja jemand von euch eine Hilfe für mich.

[synth`9dots]

Guck dir mal die Navigation von www.kineticenergy.de an. Einfachere Lösung: Flash

[eLement]

Danke. Aber da ich von Flash zu wenig Ahnung habe dass ganze zu erstellen würde es wahrscheinlich Jahre dauern bis ich das ganze Fertig habe^^
Gibt es denn keinen Weg das ganze mittels CSS und HTML anzufertigen?

[Impi]

Vielleicht hilft Dir das:
http://forum.9dots.de/viewtopic.php?t=3056

[Julianwaf]

http://www.drweb.de/magazin/imagemaps-kleine-aber-feine-unterschiede/

[R3NT5CH3R]

genau Imagemaps als Polygone sind der richtige Ansatz.

Die Lösung von www.kineticenergy.de ist meiner Meinung nach absoluter Müll, da das Rollovergedöns viel einfacher mit CSS zu realisieren ist. Ich versuchs ma zu erklären. Wir gehen mal davon aus ein Button hat die Größe von 30x20 Px, der Rollover selbstverständlich auch. Nun erstellt man ein Bild in dem die Beiden Buttons untereinander sind (60x20) und sagt mittels CSS Hover nur noch dass er das Bild nach unten verschieben soll. Das ist die zurzeit gängigste und professionellste Lösung auch ohne Javascript oder "Preloadern".

mfg

[deLiTe.]

Das Problem ist aber, dass du in diesem Fall keine 30x20 rechteckige Grafik hast, sondern ein Parallelogramm.
Da ich zu blöd war das mit den Imagemaps umzusetzen und es mich interessiert hat, hab ich mal eine etwas andere Lösung probiert:

http://jancbeck.de/code/beispiele/9dots/parallelogramm_hover/

Getestet in: Firefox 3.0, Safari 3, Opera 9, IE6 und 7
Durch die verwendete Liste bleibt es auch noch schön suchmaschinen-freundlich und leicht anpassbar.

Tut mir leid wegen der etwas schlampige Umsetzung, sowohl beim Code als auch Grafischen. Ich hab versucht es so gut wie möglich zu kommentieren außerdem hast du hier noch die PSD Datei, damit du wenigstens etwas durchblickst.

http://jancbeck.de/code/beispiele/9dots/parallelogramm_hover/schablone.rar

[synth`9dots]

[eLement]

[Impi]

Funktioniert bei mir auch im IE7

[eLement]

Dann gib dir meinen Versuch mal im IE 6 *hihi*
Aber naja. Ich werde mal sehen wie ich das mache. Wenn ich es könnte würde ich das ganze in Flash machen, nur habe ich davon leider keinen blassen Schimmer ^^

[eLement]

Okay.
Es hat ein wenig gedauert, und auch zahlreiche Versuche gebraucht das alles komplett zu verstehen und umzusetzen.

Aber nun habe ich es geschafft:

http://web6.india329.server4you.de/sway

Vielen Dank noch einmal an deLiTe.

Durch seine Vorlage hätte ich das glaube ich nicht auf diese Art und Weise hinbekommen

[Dick3rl3]

Beim hover von "Team","Home" und "Media" ist rechts auch das graue etwas heller, mich stört sowas

[Julianwaf]

Mich stört es, dass nach Wechsel in die Subnavi der Hover verschwindet

[eLement]