Image-Navigation mit Rollover-Effekt

  • Hallo zusammen,

    bei einem Kundenprojekt stehe ich etwas auf der Leitung und gebrauche eine zweite, dritte Meinung, ob ich das den richtigen Gedankenweg eingeschlagen habe ... WordPress-Webseite auf Grundlage von Seiten/Pages, keine Artikel.


    Es geht um die Seiten-Navigation - vier Menüpunkte bestehen.

    Die Grafikerin möchte unbedingt, dass die Navigation aus PNG-Grafiken aufgebaut wird.

    Seite 1 | Seite 2 | Seite 3 | Seite 4

    (schwarzer Hintergrund, Schriftfarbe in den PNG's: weiß)

    Bewegt man die Maus über Seite 2, ändert sich die Schriftfarbe der PNG-Grafik in Pink. Soweit so gut - das läßt sich mit einer simplen Bild-Rollover-Funktion durchführen.


    Mein Problem ist nur: Der Navigationspunkt der aktuell angezeigten Seite soll dann in pinker Schrift erscheinen, d.h. befinde ich mich auf Seite 2, dann soll hier die Pinke Grafik erscheinen. Bewege ich meine Maus z.B. auf "Seite 4", soll hier erneut der Rollover-Effekt angezeigt werden; Klick auf den Button "Seite 4", dann ändert sich auch der aktuelle Navigationspunkt in Pink.

    Gehe ich hier richtig in der Annahme, dass ich im WP-Loop abfragen muss "Auf welcher Seite befindest Du Dich?" - Wenn auf Seite 1, dann benutze einen anderen Rollover, als auf Seite 2, Seite 3 oder Seite 4 ... heißt ich müßte vier Rollover-Navigationen bauen ... oder kann man das in einer Navigation unterbringen.


    Ich weiß, mit Text und CSS ist das alles simpel und alles problemlos machbar ... war auch mein erster Ansatz, bis es hieß, dass eine Grafik-/Image-Navigation eingebaut werden soll ...

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Hi Tobias,

    also wenn ich dich richtig verstanden habe, dann hat die Navigation 2 Zustände: 1. schwarzer Hintergrund, weiße Schrift und 2. schwarzer Hintergrund, pinke Schrift. Nun soll "Zustand" 2. sowohl für den "Hover" als auch für die aktive Seite genutzt werden?

    Ich hoffe, dass wenn du von "Rollover" sprichst, meinst du die Lösung per Sprite Grafik, d.h. beide bzw. alle Zustände der Grafik befinden sich in der selben Bild-Datei... Beispiel: http://www.dauid.us/blog/css-image-sprites/

    WordPress setzt in seiner Navigation, so fern du das Menü nicht komplett selbst geschraubt hast die CSS-Klassen .current-menu-item und .current_page_item mit denen du dafür sorgen kannst, dass die aktive Seite aussieht wie die Mausover Variante... um bei dem Beispiel oben aus dem Link zu bleiben:

    Code
    a:hover.imagesprite, .current_page_item
    {
    
    
       background-position: 0 -60px;
    
    
    }


    Viele Grüße

  • Danke für Deine Antwort ... mittlerweile habe ich von der Grafikerin ein komplett neues Layout bekommen ... sprich das wirft alles wieder über den Haufen ... fangen wir also wieder bei Null an ... :roll:

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!