Button effekt

Wie kann man es schaffen das ein Button(Link in BildForm) beim rüberlaufen eine andere Farbe bekommt oder ähnliches?
Wenn ihr nicht wisst was ich meine geht auf Nachrichten - Aktuelle News, Hintergrnde und bildstarke Reportagen | STERN.DE und macht ein mouse-over bei den buttons.
Danke im Voraus.:smiley:
webber979

Willkommen im Forum.

Guck mal unter „CSS Sprites“ in der Quellensammlung.

Wäre trotzdem noch für weitere lösungen dankbar.

Danke:D, aber soll ich wirklich einfach nur den quellcode schreiben.:expressionless:
Der ergibt doch eigentlich nich viel Sinn.
Naja ich Probiers mal.
Wäre trotzdem noch für weitere lösungen dankbar
webber979

aber soll ich wirklich einfach nur den quellcode schreiben.
Der ergibt doch eigentlich nich viel Sinn.

Keine Ahnung, was du meinst. Viel einfacher als im ersten in der Quellensammlung verlinkten Artikel kann man das nicht erklären.

Kann mir jemand mal ein Quellcode geben bei dem beim Mouse Over aus einem Bild ein anderes wird
der hier funktioniert irgendwie nicht.:expressionless:
Wer echt dankbar.

und die css datei dazu: #examplenavi { margin:0; padding:0; list-style:none; width:8em; } #examplenavi a { display:block; padding:2px 2px 2px 10px; color:#03f; background:transparent url(lire.jpg) 0 6px no-repeat; } #examplenavi a:hover { color:#f60; background-position:0 -54px; } Danke im Voraus webber979:D

Sieh dir mal hier insbes. Ziffer 2 an: Link-Buttons

Ich glaube, ein HTML/CSS-Grundlagentutorial wäre besser. Der gezeigte Code ist sowas von falsch.

Der Code auf der Link-Buttons Seite sieht gar nicht so dumm aus.
Hat jemand sowas auf seiner Website schonmal gemacht?
webber979

Das ist auch völliger Unsinn! Das kann nicht funktionieren!

So in etwa funktioniert das. Die erweiterten Attribute für die Liste lasse ich erst mal weg, um deinen Blick auf das Wesentliche zu fokussieren.
Außerdem benutze ich Classes statt IDs, da letztere dich zu verwirren scheinen und dich für diesen Zweck auch zu sehr einschränken
[HTML]

[/HTML]

css

[CODE]ul.navlist {
list-style:none;
}

a.navi {
height: Höhe des Bildes in px;
width: Breite des Bildes in px;
background-image:url(pfad/zum/bild1.jpg);
}

a.navi:hover {
background-image:url(pfad/zum/bild2.jpg);
}[/CODE]

EDIT: Außerdem schließe ich mich voll und ganz mermshaus Meinung an, die er geschrieben hat, wärend ich das hier schrieb :wink:

Ist das das einzige was man in der css datei schreiben muss damit ein anderes Bild erscheint?

a.button2:hover
{
background-image: url(button2b.gif);
}

Oder kennt ihr einen besseren Code?

Dann Kommt das background-image beim Hovern richtig?

Ist langsam mal gut, oder? Dir wurden jetzt eine Menge Lösungen/Hilfen gegeben. Wenn du die nicht beachten willst, dann beachte sie eben nicht. Aber dann frag bitte auch nicht weiter.