Hover-Effekt mit Grafiken

[Vanessa]

Hallo,

ich habe sehr lange in den alten Nachrichten gestöbert, jedoch kein solches Posting gefunden.

Ich bin Anfängerin und suche eine Lösung dafür, dass sich eine Grafik mittels CSS ändert, wenn der Mauszeiger darauf liegt.

Also ähnlich wie bei Javascript (onMouseOver, OnMouseOut).

Die Grafik steht zwischen einem <a href=""></a>, wird also für einen Link benötigt.

Kann mir jemand helfen?

Viele Grüße
Vanessa

[wahsaga]

hi,

Ich bin Anfängerin und suche eine Lösung dafür, dass sich eine Grafik mittels CSS ändert, wenn der Mauszeiger darauf liegt.

Die Grafik steht zwischen einem <a href=""></a>, wird also für einen Link benötigt.

mache _gar_ keine grafik als <img> in den link - sondern formatiere den link mit display:block; und einer festen breite, und verpasse ihm dann ein hintergrundbild - und für a:hover ein anderes.

gruß,
wahsaga

[Markus Pitha]

Hallo,

mache _gar_ keine grafik als <img> in den link - sondern formatiere den link mit display:block; und einer festen breite, und verpasse ihm dann ein hintergrundbild - und für a:hover ein anderes.

So etwas habe ich schon mal probiert. War zwar schon länger her, aber ich weiß noch, dass sich der IE wieder mal quer gestellt hat.

Markus.

[Vanessa]

Hallo Wahsaga,

vielen Dank für Deine Antwort.

Bin absolute Anfängerin und habe keine Ahnung, was Du meinst.

Was ich bräuchte wäre ein Erklärung, wie ich das ganze in der CSS-Datei formatieren muss und mit welcher Syntax ich in der HTML-Datei die Grafik dann anzeigen lassen kann.

Bitte Geduld mit mir ... bin gerade am "lernen".

[wahsaga]

hi,

Bin absolute Anfängerin und habe keine Ahnung, was Du meinst.

dann lerne grundlagen von CSS.
ein guter anfang wäre es, die genannten stichworte in selfhtml nachzuschlagen.

Was ich bräuchte wäre ein Erklärung, wie ich das ganze in der CSS-Datei formatieren muss und mit welcher Syntax ich in der HTML-Datei die Grafik dann anzeigen lassen kann.

die hast du eigentlich bekommen. das jetzt umzusetzen, bleibt dir überlassen.

Bitte Geduld mit mir ... bin gerade am "lernen".

sicher.
aber berücksichtige bitte, was oben über diesem forum steht: das grundlagenkenntnisse hier vorausgesetzt werden.

gruß,
wahsaga

[willie]

hallö,

Was ich bräuchte wäre ein Erklärung, wie ich das ganze in der CSS-Datei formatieren muss und mit welcher Syntax ich in der HTML-Datei die Grafik dann anzeigen lassen kann.

die relevanten abschnitte sind die hier:
für den grafik_wechsel_ http://de.selfhtml.org/css/formate/zentrale.htm#pseudoformate
für das einbinden der _grafik_ http://de.selfhtml.org/css/eigenschaften/hintergrund.htm
für _breite und höhe_ http://de.selfhtml.org/css/eigenschaften/positionierung.htm#width
du kannst natürlich gerne weiterschmökern.

grundsätzlich würde ich aber bemerken, dass du dabei den hintergrund des verweises änderst, nicht den verweis selbst. das hat zur folge, dass du - um die grafik in gänze anzeigen zu lassen - den link leer lassen <a href="bla"> </a> müsstest. und das heißt, dass du nicht nur suchmaschinen ausschließt, sondern auch alle älteren browser (ohne oder fehlerhaftes CSS) und textbrowser, braille-geräte usw. usf.
(mir fällt selbstverfreilich ne andere lösung ein - du kannst zb. hier weiter lesen http://de.selfhtml.org/css/eigenschaften/schrift.htm ;-)

grüße aus Leipzig
willie

[Cybaer]

Hi,

Ich bin Anfängerin und suche eine Lösung dafür, dass sich eine Grafik mittels CSS ändert, wenn der Mauszeiger darauf liegt.

Da du damit nicht Grafiken, sondern nur Hintergrundgrafiken austauschn kannst, gibt es ein paar Dinge zu bedenken:

1. Browser ohne CSS (das können auch aktuelle mit deaktiviertem Stylesheet oder generell ohne CSS sein, z.B. auf PDAs) sehen überhaupt keine Grafik (beim JavaScript-RollOver ist wenigstens noch die Ursprungsgrafik zu sehen, falls JS deaktiviert/nicht vorhanden ist).
2. Beim Ausdruck erscheint die Grafik nur, wenn der Nutzer explizit eingestellt hat, auch den Hintergrund zu drucken (was oft nicht der Fall sein dürfte)
3. Auf dem IE klappt es ohnehin nur, wenn es sich um einen Link handelt.

Ergo: Unter dem Gesichtspunkt des "Grafikwechsels" betrachtet eine ziemlich unsinnige Technik, die dich ohne Not von (nicht von dir beeinflußbaren) Browsereigenschaften abhängig macht ...

Gruß, Cybaer