Blider mit Links verknüpfen

  • ich habe eine Navigationsleiste mit 5 Links. Ich möchte jeden Link mit einem eigenen Bild verknüpfen. Wenn ich mit der Maus über Link 1 gehe, soll das Standard Backgroundbild verschwinden und Bild 1 erscheinen . Wenn ich über Link2 gehe, soll das Bild2 erscheinen usw. Vielleicht weiß einer von euch wie das klappt.


    Gruß Jochen

  • Eine Möglichkeit per CSS wäre in etwa so;


    #Link1 { width: 100px; height: 40px; background:url(img-link1.jpg); }
    #Link1:hover { background:url(img-link1-hover.jpg); }


    #Link2 { width: 100px; height: 40px; background:url(img-link2.jpg); }
    #Link2:hover { background:url(img-link2-hover.jpg); }


    etc.

  • Ich habe den ganzen Tag es probiert. Ich bekomme es nicht hin.Ich habe mit dem Hover Probleme- Wenn ich über die Navi Leiste gehe
    möchte ich (hier im Beispiel) die Farbe im Container geändert haben.


    Ich schicke aus Verzweifelung den Code. Vielleicht findet jemand den Fehler?
    <body>
    <div id="nav">
    <ul>
    <li><a href="#Seite1">Bild 1</a></li>
    <li><a href="#Seite2">Bild 2</a></li>
    <li><a href="#Seite3">Bild 3</a></li>
    </ul>
    </div>
    <div id = "container">
    </body>


    #nav a {
    padding-left: 3px;
    width: 125px;
    height: 35px;
    line-height: 35px;
    color:black;
    display: block;
    }
    #container{
    float: left;
    width: 400px;
    height:400px;
    background: blue;
    }



    #nav li a#Seite1:hover #container {
    background:green);
    }
    #nav li a#Seite2:hover #container {
    background:red);
    }

  • Im Code waren noch einige Fehler, die ich rausgenommen habe. Nun funktioniert zwar das, was oben angedacht war, aber es waren nicht die Links gemeint, sondern das grosse Container-DIV. Also ein anderes Element soll geändert werden als das, was die Aktion auslöst. Mir fällt dazu auch gerade nichts ein. Kennst Du eine Seite, auf der das so ist, mit CSS umgesetzt?


  • Hallo


    So geht das technisch nicht.


    In dieser Angabe


    Code
    1. #nav li a#Seite1:hover #container


    sind die Leerzeichen Selektoren. Die können nur auf tiefere Ebenen verweisen. Es gibt auch Selektoren für Geschwisterelemente.


    Es gibt aber keine Selektoren um wieder hoch zu springen, in diesem Fall vom a zurück (hoch) zum div#nav um dann zum Geschwisterelement vom div#nav, dem div#container, zu gelangen.


    Gruss


    MrMurphy

  • Dann versuch es mal so

  • :) :) :) :) :) :) :) :) :) :) :) :) :) :) :)


    Genau das habe ich mehr als einen Tag lang versucht. Dank dir, aber auch den anderen.Tolles Forum!!!!!!!!!!!!!!!!!!!!!!!!!!


    Aber: ich habe noch eine Frage;


    Wie verändere ich die Farben im Container wenn ich die Navigation untergliedern möchte.
    Zum Beispiel:


    <li><a href="#">Seite 1 </a>
    <ul>
    <li><a href="#">Seite 2 </a></li>
    <li><a href="#">Seite 3 </a></li>
    <li><a href="#">Seite 4 </a>
    <ul>
    <li><a href="#">Thema 4.1 </a></li>
    <li><a href="#">Thema 4.2 </a></li>


    </ul>
    </li>
    </ul>
    </li>



    Wenn ich die Gliederung erstelle indem ich mit Li die Unterseiten einschliesse funktioniert es leider nicht mehr

  • Da bin ich aus versehen auf den Absende Botton gekommen.


    Aber ich hoffe ich habe mich trozdem verständlich ausgedrückt.


    Die grundsätzlich Frage ist: Wie muss ich den Code anpassen wenn ich die Navigation untergliedere(2 Ebenen)?
    Dann muss ich nach meinen jetzigen Kenntnissen mit Li arbeiten, und dann funktioniert #Link1 usw nicht, oder?


    LG


    Jochen

  • Hallo


    Es ist schwer dir zu helfen wenn du mit den relevanten Informationen erst nach und nach herausrückst. Irgendwann haben viele Leute, die gerne helfen wollen, auch keine Lust mehr Lösungen zu erarbeiten, die nicht funktionieren können, weil ihnen wichtige Informationen vorenthalten wurden.


    So sollte


    Zitat

    mit der Maus über


    zunächst geklärt werden, wie die Seite auf Touchscreen-Geräten funktionieren soll. Die haben in der Praxis inzwischen einen höheren Verbreitungsgrad als Desktop-Monitore. Deshalb sind erfahrungsgemäß alle Lösungen, die auf hover-Effekte angewiesen sind, in der Praxis sinnlos.


    Hover-Effekte sollten nur noch für Spielereien verwendet werden, deren Fehlen die Benutzbarkeit einer Webseite nicht beeinträchtigt.


    Gruss


    MrMurphy

  • Tut mir leid, das ist kein böser Wille sondern Unkenntnis.


    Die Seiten, an denen ich arbeite, sollen nur auf einem Laptop und Desktop laufen.



    Ich habe bestimmt mehr als einen halben Tag rum gesucht ud bestimmt mehr als einen Tag diverses versucht, habe aber keine Idee und schon recht keine Lösung außer Hover gefunden-
    Wenn es doch eine andere Möglichkeit als Hoover (außer Javascript) gibt um die Farbe im
    Container zu ändern, nehme ich sie gerne wahr.Es darf nur nicht zu komliziert
    sein da ich kein Experte für Htlm5 und CSS bin. Ich arbeite mich noch
    ein.


    LG


    Jochen

  • Wenn ich die Gliederung erstelle indem ich mit Li die Unterseiten einschliesse funktioniert es leider nicht mehr


    Zunächst ein +1 djheke für die Lösung. (Schade, dass es hier im Forum keine "Bedanken"-Funktion o. ä. gibt.)


    Die Lösung von djheke beruht auf dem Geschwister-Selektor. Das bedeutet, die auslösenden Elemente und die Zielelemente müssen auf der gleichen Ebene sein. Daher hatte die Lösung auch den Umbau in der Struktur mit Verzicht auf das Listen-Element nötig gemacht.


    Wenn Du dir deine gewünschte Struktur mit Einrückungen ansiehst, wobei jede Einrückung einer Ebene entspricht, wird das Problem deutlich, da sich mit CSS de facto nur Elemente auf gleicher oder untergeordneter Ebene ansprechen lassen.
    Um deinen gewünschten Efekt umzusetzen, wird wohl JavaScript zum Einsatz kommen müssen.


  • Hallo


    Zitat

    Tut mir leid, das ist kein böser Wille sondern Unkenntnis.


    Du brauchst dich bei mir nicht zu entschuldigen. Das war nur ein Hinweis damit Probleme überhaupt nicht erst aufkommen.


    Zitat

    Um deinen gewünschten Efekt umzusetzen, wird wohl JavaScript zum Einsatz kommen müssen.


    Oder etwas Phantasie.


    Zu dem HTML



    könnte man zum Beispiel das folgende CSS nehmen:



    Damit kann die Hintergrundfarbe (oder halt auch Hintergrundbilder) von allen fünf li-Elementen (Seite 2 bis 4, Thema 4.1 und 4.2) aus per hover-Effekt gewechselt werden.


    Die restliche Gestaltung (Breiten, Hintergrundfarben, Position des Containers und so weiter) ist dann noch etwas Standard-CSS. Mir geht es bei dem Beispiel nur um die Funktion der Farbwechsel.


    Insgesamt ist die nächste Frage ob überhaupt eine Liste notwendig ist. Für viele Lösungen sind Listen weder vorgeschrieben noch sinnvoll, sondern sie werden vollkommen unnötig aus Gewohnheit verwendet - mit allen ihren Nachteilen. Auch was die Besucherfreundlichkeit angeht. Verschachtelte, zunächst teilweise versteckte Navigationen, sind Barrieren und Zeitfresser.


    Dazu müssten wir aber wissen was Jochen im Endeffekt erreichen möchte.


    Gruss


    MrMurphy

  • Auch dafür +1, MrMurphy :) Geht wirklich ohne JS. Wenn man den Container in die Nav steckt. Wo er in diesem Fall ja auch hingehört, ist ja zu Demozwecken. Also mit Geschwister- und Nachfahren-Selektoren kann man das machen, wenn man dem Aufbau nicht weiter Beachtung schenken muss.


    edit:
    Weil mich das jetzt so fasziniert hat und obwohl der TE explizit auf JS verzichten möchte, habe ich das mal mit einer winzigen JS-Funktion umgesetzt. Für mich ist einfach die Struktur übersichtlicher, und der CSS-Aufwand hält sich auch sehr in Grenzen.


    Dieser Beitrag wurde bereits 2 Mal editiert, zuletzt von Jav ()

  • Also erst noch mal meinen herzlichsten Dank an euch, Meister der Codierung.

    Ich versuche die erste Seite von Calida nach zu bauen. Die finde ich einfach von der Steuerung her super., mag auch an den Mädels liegen ;) .


    http://www.calida-shop.de/?adw…da/Calida%20Global/calida


    Sie birgt darüber hinaus viele interessante Ansätze, die nachzuvollziehen mir nochg einige Nerven und Tage kosten werden. Es wird für mich eine Herausforderung werden..


    Ich arbeite an einer Homerpage, die sich an Männer um und über 50 Jahre richten wird. Sie hat den Titel Lebe Smart.


    LG


    Jochen

  • Hallo


    Zitat

    Ich versuche die erste Seite von Calida nach zu bauen.


    Das dürfte für Anfänger schwierig werden. Die Seite wurde von einem Profi auf Grundlage von Bootstrap mit einer Datenbank im Hintergrund und mehr als einer Prise JavaScript und PHP erstellt.


    Meine Tips kannst du damit auch in die Tonne treten. Ich war von einem ganz anderen Ergebnis ausgegangen. Für so ein Menü (oder einem benutzerfreundlicheren) würde ich ganz anders vorgehen, dafür sind meine bisherigen Ansätze überhaupt nicht geeignet. Das sprengt auch den Zeitaufwand, den ich im Forum geben kann.


    Gruss


    MrMurphy

  • Ich will nur die Steuerung der ersten Seite nachbauen mit Bilder erscheinen und verschwinden wenn man die Links anklickt. Und das mache ich mit eurem Vorschlag. Also nichts mit ab in die Tonne.
    Einen schönen Tag noch wünsche ich


    Jochen

  • Ich habe so langsam das Gefühl, dass es eine kleine Bildergalerie werden soll. Wenn dem so ist, dann hättest du es gleich schreiben können. Und ja, viel Glück beim Probieren.