Mouseover bei Menü (mit Grafiken) und Startseitengrafik koppeln

  • Hallo zusammen,

    ich habe folgendes Problem: ich erstelle gerade eine Seite in Wordpress basierend auf dem Theme Twenty Fourteen. Die Seitenstruktur sieht so aus, dass ich oben das waagerechte Hauptmenü mit Textlinks versehen habe. Der Seitennavigation links ist pro Link jeweils eine Grafik hinterlegt, die jeweils einen Geschäftsbereich abdeckt. Soweit funktioniert auch alles wunderbar.
    Mein Kunde hat jetzt aber folgende Anforderung: Die Startseite besteht aus einer großen Grafik, in der die vier Geschäftsbereiche noch einmal auftauchen, die Grafik ist eine imagemap mit vier Links (analog zur seitlichen Navigation). Jetzt soll bei Mouseover über einen der Links auf der Startseite sowohl dieser verlinkte Teil der Grafik wie auch der entsprechende Menüeintrag hervorgehoben werden. Umgekehrt soll bei Mouseover über das Menü auch die Startseitengrafik im entsprechenden Bereich hervorgehoben werden.
    Ist das technisch überhaupt möglich und wenn ja, hat jemand eine Idee dazu?

    Vielen Dank im Voraus!!

    • 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

  • du kannst die Klassen der Links, über ein Plus verbinden

    also z.B.


    Code
    .headernavlink1:hover + .Seitennavlink1 {
     color:#FF0000;
    }

    dann wäre bei hover im Header, auch der Link in der Sidebar rot

    und umgekehrt

    Code
    .Seitennavlink1:hover + .headernavlink1 {
     color:#FF0000;
    }
  • Erst einmal würde ich von der Imagemap weg wenn du die Seite im Responsiv Design fertig stellen willst.

    Des weiteren ist es möglich in den den "cursor" in der CSS anzusprechen.

    Zitat

    CSS: .bereich1 {cursor: default /* Normale Mouseover anzeige */} .bereich2 {cursor: pointer /* Zeigefinger Mouseover anzeige */}

    http://www.w3.org/wiki/CSS/Properties/cursor

  • Vielen Dank schon mal für Eure Antworten! Ich bin gerade noch mit anderen Baustellen beschäftigt, werde aber in den nächsten Tagen mit Euren Ansätzen experimentieren :)
    Wenn nötig, melde ich mich noch einmal!

Jetzt mitmachen!

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