Vorheriges Thema anzeigen :: Nächstes Thema anzeigen |
Autor |
Nachricht |
eLement Mitglied
Angemeldet: 30.11.2005 Beiträge: 54
|
Verfasst am: 05.11.2008, 03:09 Titel:
Hilfe bei Hover-Navigation |
|
|
|
|
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. |
|
Nach oben |
|
|
synth`9dots Administrator
Angemeldet: 02.08.2003 Beiträge: 3263 Wohnort: Karlsruhe Interessen: 9dots Design
|
Verfasst am: 05.11.2008, 04:59 Titel:
|
|
|
|
|
Guck dir mal die Navigation von www.kineticenergy.de an. Einfachere Lösung: Flash |
|
Nach oben |
|
|
eLement Mitglied
Angemeldet: 30.11.2005 Beiträge: 54
|
Verfasst am: 05.11.2008, 05:24 Titel:
|
|
|
|
|
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? |
|
Nach oben |
|
|
Impi Mitglied
Angemeldet: 06.05.2006 Beiträge: 530
|
|
Nach oben |
|
|
Julianwaf Mitglied
Angemeldet: 03.11.2005 Beiträge: 385 Wohnort: - / Land: NRW
|
|
Nach oben |
|
|
R3NT5CH3R Mitglied
Angemeldet: 20.12.2005 Beiträge: 107
|
Verfasst am: 05.11.2008, 16:34 Titel:
|
|
|
|
|
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 |
|
Nach oben |
|
|
deLiTe. Mitglied
Angemeldet: 16.09.2006 Beiträge: 504 Wohnort: Freiburg Interessen: Eye-Candy
|
Verfasst am: 05.11.2008, 19:05 Titel:
|
|
|
|
|
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 |
|
Nach oben |
|
|
synth`9dots Administrator
Angemeldet: 02.08.2003 Beiträge: 3263 Wohnort: Karlsruhe Interessen: 9dots Design
|
Verfasst am: 05.11.2008, 21:29 Titel:
|
|
|
|
|
R3NT5CH3R hat folgendes geschrieben: | 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. |
Darum geht's aber nicht! |
|
Nach oben |
|
|
eLement Mitglied
Angemeldet: 30.11.2005 Beiträge: 54
|
Verfasst am: 05.11.2008, 21:42 Titel:
|
|
|
|
|
deLiTe. hat folgendes geschrieben: | 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 |
Ich werde mir diese Lösung einmal genauer Ansehen und das ganze versuchen umzusetzen.
Derzeit habe ich zwar eine Variante gefunden, die scheint aber nur im FF zu funktionieren, und ist auch so nicht gerade die beste Variante ^^
Hier einmal der Link dazu:
http://web6.india329.server4you.de/sway/ |
|
Nach oben |
|
|
Impi Mitglied
Angemeldet: 06.05.2006 Beiträge: 530
|
Verfasst am: 05.11.2008, 23:22 Titel:
|
|
|
|
|
Funktioniert bei mir auch im IE7 |
|
Nach oben |
|
|
eLement Mitglied
Angemeldet: 30.11.2005 Beiträge: 54
|
Verfasst am: 05.11.2008, 23:23 Titel:
|
|
|
|
|
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 ^^ |
|
Nach oben |
|
|
eLement Mitglied
Angemeldet: 30.11.2005 Beiträge: 54
|
Verfasst am: 07.11.2008, 08:33 Titel:
|
|
|
|
|
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 |
|
Nach oben |
|
|
Dick3rl3 Mitglied
Angemeldet: 06.08.2004 Beiträge: 1923 Wohnort: Berlin Interessen: Webdesign, Musik
|
Verfasst am: 07.11.2008, 16:31 Titel:
|
|
|
|
|
Beim hover von "Team","Home" und "Media" ist rechts auch das graue etwas heller, mich stört sowas |
|
Nach oben |
|
|
Julianwaf Mitglied
Angemeldet: 03.11.2005 Beiträge: 385 Wohnort: - / Land: NRW
|
Verfasst am: 07.11.2008, 16:32 Titel:
|
|
|
|
|
Mich stört es, dass nach Wechsel in die Subnavi der Hover verschwindet |
|
Nach oben |
|
|
eLement Mitglied
Angemeldet: 30.11.2005 Beiträge: 54
|
Verfasst am: 07.11.2008, 17:41 Titel:
|
|
|
|
|
Dick3rl3 hat folgendes geschrieben: | Beim hover von "Team","Home" und "Media" ist rechts auch das graue etwas heller, mich stört sowas |
Danke. Ich werde das ganze noch mal ein wenig überarbeiten.
Julianwaf hat folgendes geschrieben: | Mich stört es, dass nach Wechsel in die Subnavi der Hover verschwindet |
Daran arbeite ich noch. Mal sehen wie ich das am besten realisieren kann |
|
Nach oben |
|
|
|