Scrollover - Bild

Hallo. Ich weiss gerade nicht weiter, wie der Befehl lautet wenn ich beim Headerbild mit dem Coursor drüberfahre ein anderes Bild gezeigt wird. Generell klappt die Formatierung beim hover gut mit CSS, aber daß ein anderes Bild gezeigt wird weiss ich nicht. Vielen Dank im vorraus

Johannes

Die Zauberformel lautet »CSS Sprites«. Eine Suchanfrage in einer bekannten Suchmaschine liefert mitunter hilfreiche Ergebnisse.

Englische Seiten:

[ul]
[li]CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
[/li][li]10 Must See CSS Sprites Tutorials
[/li][/ul]

Deutsche Seiten:

[ul]
[li]CSS Sprites einfach erklärt
[/li][li]CSS Sprites – Einsparung an HTTP-Requests durch Kombination von Hintergrund-Bildern
[/li][/ul]

Hi. Erstmal danke für die Antwort. Ich habe es gerade mal ausprobiert aber es hat hinten und vorne nicht geklappt (bin Anfänger). Kann ich dem Headerbild nicht einfach in CSS einen hover-Befehl (in dem Falle, ein Sprung zu einem anderen Bild) zuweisen?

Gruß

DAS ist mal sowas von stark, kannte ich noch gar nicht :slight_smile:
Werde ich mir bei Gelegenheit mal anschauen!

@ Johannes:

Vielleicht tut es auch ein MouseOver mit JS? Schau dir mal die Seite hier an:
Web-Toolbox Startseite JavaScript praxisorientierte Beispiele Web-Design kostenlos
Links im Menü klickst du auf „Event-Handler Bildtausch“ und in dem sich öffnenden Untermenü auf „Einsatzbereiche“, ab da wird alles ganz ausführlich erklärt, das müsste auch für einen Anfänger leicht umsetzbar sein! :slight_smile:

Beste Grüße

Hi. Danke für den Link. Habe gerade auch noch ein wenig gesucht und habe auch nur Javaskriptlösungen gefunden. Muss man irgendwas bei der „Einbindung“ von Javaskript beachten und gibt es damit nicht Probleme mit einigen Browsern? Versuche es deswegen zu vermeiden …

Grüße

Naja, problematisch kann es werden, wenn JavaScript ausgeschaltet ist. Nicht jeder möchte durch seinen Browser Scripts ausführen lassen, und wenn man das ausgeschaltet hat, geht sowas natürlich nicht. Die Sache ist einfach die, dass JS selbst zwar eigentlich keinen großen Schaden anrichten kann, aber in Verbindung mit anderen Dingen kann es für den Endnutzer gewisse Risiken bergen:

Tipps und Tricks: JavaScript

Man sollte natürlich nicht alles mit JS realisieren, aber ein MouseOver tut keinem weh. Ich benutze es auch hin und wieder und eigentlich wird man, wenn man es ausgeschaltet hat, beim Besuch einer Seite auch gefragt, ob man die Scripts im Quelltext ausführen lassen möchte (so kenne ich das jedenfalls…). Wer das möchte, kann das dann machen, wer nicht, lässt es eben.

Grüße

Danke für den Tipp.

Grüße

na wenigstens werden die nachteile bei der JS-lösung gleich mit genannt. 8)

guckst du hier: Test - CSS-Hover

[HTML]

Test - CSS-Hover h1{ width:800px; height:150px; background-image:url("http://www.html.de/images/test1.jpg"); } h1:hover{ background-image:url("http://www.html.de/images/test2.jpg"); }

Seitentitel

[/HTML]

EDIT:
Allerdings würd ich noch ein transparentes image zwischen

machen.
wegen dem alternativen text und ggf. einem link

EDIT2:
Habs mal rein editiert :wink:

Super, probiere ich gleich mal aus. Dank und Gruß