CSS Rollover Bild - Menü erstellen mit CSS
  • Vote Up0Vote Down WebGenWebGen February 2008

    Hallo zusammen,

    ich habe mal wieder eine Frage.
    Ich suchte nach einer Lösung mein Menü per CSS zu gestalten. Hab ein wenig gegooglet und bin auch fündig geworden. Jedoch ist bei allen nur beschrieben wie man ein Bild mit dieser Variante austaucht. Tja, ich bin kein CSS'ler und daher habe ich mich mal notdürftig daran probiert, es hinzubekommen.
    Habs soweit auch geschafft, jedoch wird nur das oberste Bild verlink und die anderen nicht, da das (a hover) als Link codiert ist, ich jedoch die anderen beiden Bilder mit (a2 hover) und (a3 hover) umcodiert habe, damit ich sie mit dem CSS ansprechen kann. So funktionierts natürlich nicht. Hätte mir da jemand ne Lösung ??

    Mein bisheriger Script: (funktioniert einwandfrei nur sind sie nicht verlinkt)



    Rollover mit CSS - Beispiel 5

    a { display:block;
    background-image:url(http://14mb.de/u/handelskontor/3_artikel_button_normal.jpg);
    width:130px; height:72px }
    a:hover { background-image:url(http://14mb.de/u/handelskontor/3_artikel_button_aktiv.jpg); }
    a2 { display:block;
    background-image:url(http://14mb.de/u/handelskontor/1_bewertungen_button_normal.jpg);
    width:130px; height:72px }
    a2:hover { background-image:url(http://14mb.de/u/handelskontor/1_bewertungen_button_aktiv.jpg); }
    a3 { display:block;
    background-image:url(http://14mb.de/u/handelskontor/2_profil_button_normal.jpg);
    width:130px; height:72px }
    a3:hover { background-image:url(http://14mb.de/u/handelskontor/2_profil_button_aktiv.jpg); }









    Bitte schreibt mir einen vollen HTML-Code ansonsten bekomm cihs wieder nich hin. Also den gesamten HTML-Tag


    MfG Matthias

  • 1 Kommentieren sorted by
  • Vote Up0Vote Down WebGenWebGen February 2008

    Hab die Lösung gefunden. Den gefundenen Script bissl zurecht geschnibbelt und es lief...







    Unbenanntes Dokument
    #wechsel a {
    background: url(http://14mb.de/u/handelskontor/3_artikel_button_aktiv.jpg) no-repeat;
    display:block; width:130px; /* Linkbereich begrenzen */
    }
    #wechsel img {
    display:block; width:130px; height:72px; border:0;
    }
    #wechsel a:hover img {
    visibility: hidden;
    }
    #wechsel a:hover { /* Workaround fuer IE 5.5 und 6 */
    border:0;
    }
    * html #wechsel a {
    margin-right:1px;
    }
    * html #wechsel a:hover {
    width:130px; margin-right:0; /* Workaround fuer IE 5.01 */
    }
    #wechsel2 a {
    background: url(http://14mb.de/u/handelskontor/1_bewertungen_button_aktiv.jpg) no-repeat;
    display:block; width:130px; /* Linkbereich begrenzen */
    }
    #wechsel2 img {
    display:block; width:130px; height:72px; border:0;
    }
    #wechsel2 a:hover img {
    visibility: hidden;
    }
    #wechsel2 a:hover { /* Workaround fuer IE 5.5 und 6 */
    border:0;
    }
    * html #wechsel2 a {
    margin-right:1px;
    }
    * html #wechsel2 a:hover {
    width:130px; margin-right:0; /* Workaround fuer IE 5.01 */
    }
    #wechsel3 a {
    background: url(http://14mb.de/u/handelskontor/2_profil_button_aktiv.jpg) no-repeat;
    display:block; width:130px; /* Linkbereich begrenzen */
    }
    #wechsel3 img {
    display:block; width:130px; height:72px; border:0;
    }
    #wechsel3 a:hover img {
    visibility: hidden;
    }
    #wechsel3 a:hover { /* Workaround fuer IE 5.5 und 6 */
    border:0;
    }
    * html #wechsel3 a {
    margin-right:1px;
    }
    * html #wechsel3 a:hover {
    width:130px; margin-right:0; /* Workaround fuer IE 5.01 */
    }












Add a Comment

Willkommen!

It looks like you're new here. If you want to get involved, click one of these buttons!

Einloggen Registrierung!

Kategorien

Diskussionsteilnehmer

Who's Online (0)