bilderaustausch

[sear]

hallö,

ist ein hintergrund-bild-austausch beim überfahren eines listenpunktes mit purem css möglich?

danke!
sear >>

---
"wir versinken in informationen und hungern nach wissen"

[andre5]

Sear

Ja, ja.

a:link {background-image: url(blue.gif);}
a:hover {background-image: url(red.gif);}
Dann musst du es nur noch der richtigen Klasse ode ID zuordnen.

Fertig, Andre
--
Dschinni - Web in alle Richtungen

[sear]

aaa ir seit schon die beschten!

danke =)

[Thomas Luethi]

Hallo,

ist ein hintergrund-bild-austausch beim überfahren eines listenpunktes mit purem css möglich?

Theoretisch:
li { background-image: url("bild1.png"); }
li:hover { background-image: url("bild2.png"); }
Das kann Mozilla, aber der MS IE kann's nicht.

Der MS IE kann :hover nur bei Links.
Du musst also die Inhalte der Listenpunkte noch in Links packen.
<li><a href="#">Inhalt</a></li>
und dann das CSS so schreiben:
li a { background-image: url("bild1.png"); }
li a:hover { background-image: url("bild2.png"); }

Ein Ansatz, der statt Bild-Austausch eine Bild-Positionierung vorschlaegt:
http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/
MS IE Benutzer jammern oft, dass es bei einem
Bilderwechsel via CSS zu einem stoerenden Ruckeln komme.
Eine moegliche Gegenmassnahme:
http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/update.html

Gruesse,

Thomas

[MudGuard]

Hi,

Du musst also die Inhalte der Listenpunkte noch in Links packen.
<li><a href="#">Inhalt</a></li>

Verbesserungsvorschlag:
<li><a href="#genauhier" name="genauhier" class="nolink">Inhalt</a></li>

Damit wird der Sprung zum Seitenanfang unterdrückt, der Link verweist auf sich selbst.

Dann noch mit
.nolink:link, .nolink:visited, .nolink:focus, .nolink:active, .nolink:hover { /* die Einstellungen für normalen Text, incl. cursor:normal; */}

Dann sieht man auch fast nicht, daß es ein Link ist (nur in der Statuszeile).

(Schei... Aufwand, nur weil der IE das :hover 5,5 Jahre nach dessen Standardisierung immer noch nicht richtig kann).

Der Rest wie von Thomas angegeben...

cu,
Andreas

[MudGuard]

Hi,

, incl. cursor:normal;

Self-Correction: hätte doch erst nachgucken sollen: cursor:text; muß es sein, nicht normal (normal gibt es nicht...)

cu,
Andreas