1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen
  2. Unsere jährliche Weihnachts-Banner-Aktion hat begonnen! Wir freuen uns auf viele, viele kreative Vorschläge.
    Mehr dazu könnt Ihr hier nachlesen: Weihnachtsbanner 2016

    Information ausblenden

[CSS] Fotos in Dropdownmenü durchwechseln

Dieses Thema im Forum "PHP & Co." wurde erstellt von jomi, 30.01.10.

  1. jomi

    jomi Kleiner Weinapfel

    Dabei seit:
    05.10.07
    Beiträge:
    1.138
    Ich programmiere derzeit an einem Dropdownmenü rum (einfach per <ul> erstellt), sagen wir mal es hat den Titel "Früchte" und als Menüpunkte "Apfel", "Birne" und "Pflaume". Mein Ziel ist, wenn der Mauszeiger auf einem der Menüpunkte ist, ein entsprechendes Foto unten im Menü anzuzeigen.

    Per Javascript ist das ja verhältnismäßig einfach:
    Ich füge unter "Pflaume" einen weiteren Menüpunkt hinzu, wo aber keine Frucht hinkommt, sondern das jeweilige Bild. Dann schreibe ich ein kleines Script, dass als Mouseover-Event von jedem Menüpunkt aufgerufen wird und unten das jeweilige Bild aufrauft (z.B. indem es den Wert des CSS-Elementes Background entsprechend abändert). Pseudocode:

    function BildWechseln () {
    var bildmenupunkt = this.parentElement.lastChild;
    bildmenupunkt.style.background = 'apfel.jpg';
    }



    Fällt euch irgendeine Möglichkeit ein, die selbe Funktionalität auch ohne Javascript (also nur mit HTML und CSS) zu erreichen?
     
  2. jomi

    jomi Kleiner Weinapfel

    Dabei seit:
    05.10.07
    Beiträge:
    1.138
    So, nach langem Rumprobieren war das Problem weg. Vielleicht war es dann besoffen… ;)

    Jetzt bleibt aber noch ein kleines Problem:
    Die CSS-Eigenschaft -webkit-border-radius funktioniert im untenstehenden Quellcode nur für die Bilder, nicht für den Hintergrund… Hat irgendjemand eine Ahnung, woran das liegt bzw. wie es zu beheben oder umgehen ist?

    HTML-Seite:

    Code:
    <ul>
    <li id="apfel"><a href="apfel.html">Apfel</a></li>
    <li id="birne"><a href="birne.html">Birne</a></li>
    <li id="pflaume"><a href="pflaume.html">Pflaume</a></li>
    </ul>
    und der CSS-Code dazu:

    Code:
    body {
    	background-color: white;
    }
    li {
    	background-color: black;
    }
    
    li, li a {
    	-webkit-border-bottom-left-radius: 5px;
    	-webkit-border-bottom-right-radius: 5px;
    }
    
    .apfel a {
    	padding-bottom: 126px !important;
    }
    .birne a {
    	margin-top: -121px !important;
    	padding-bottom: 101px !important;
    }
     .pflaume a {
    	margin-top: -96px !important;
    	padding-bottom: 76px !important;
    }
    
     

Diese Seite empfehlen