Beiträge von Jav

    Ich denke, der Fehler liegt in der Vorladen-Funktion. Die Seite mit dem Beispiel hatte ich auch gefunden, weil mich die Zuweisung eines Bildes an ein Array stutzig gemacht hatte. Aber so sollte es funktionieren:


    edit:
    alte Version, nicht so schön:

    JavaScript
    1. function Vorladen01()
    2. {
    3. for(var i=0; i<BildListe.length; i++)
    4. {
    5. var Bild = new Image();
    6. Bild.src = BildListe[i];
    7. Bilder[i] = Bild;
    8. }
    9. }


    neue Version:

    JavaScript
    1. function Vorladen01()
    2. {
    3. var Bild;
    4. for(var i=0; i<BildListe.length; i++)
    5. {
    6. Bild = new Image();
    7. Bild.src = BildListe[i];
    8. Bilder[i] = Bild;
    9. }
    10. }

    Ich hatte jetzt an eine setDefaults-Funktion gedacht, die bei onmouseout in jedem Link aufgerufen wird. Da aber meine Tests nicht wirklich zufriedenstellend waren (das Zurücksetzen geschieht dann natürlich auch, wenn die Maus auf die Border kommt und bevor ein anderer Link das Bild neu setzt, was zu unschönem Geflackere führt), hätte mich der Ansatz jetzt auch interessiert.

    Falls es um die Lupe geht:
    Du verwendest ein Bild, das 24 x 24 Pixel gross ist, als Hintergrundbild für einen 20x20-Pixel-Button. Bilder werden zwar beim <img>-Tag mit Grössenangaben skaliert, aber nicht bei Angabe als Hintergrundbild (ok, bei <body> ist es wieder was anderes).
    Durch die Angabe von "center" wird das Bild im Button zentriert, aber an allen Seiten fehlen 2 Pixel ("fehlen" natürlich nicht, sondern werden nicht angezeigt).

    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.


    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.


    Ich habe mir gerade die Desktop-Version kurz angesehen. Die Seite scheint ausgelegt für Monitore mit mindestens 1600 Pixel Breite, denn bei meiner 1024er-Auflösung habe ich nur ca. die Hälfte im Blickfeld und muss horizontal scrollen.
    aktueller FireFox, Zoom normal.

    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?


    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.