• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Scrollover - Bild

Johannes11

Neues Mitglied
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
 
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ß
 
Die Zauberformel lautet »CSS Sprites«.

DAS ist mal sowas von stark, kannte ich noch gar nicht :)
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! :)

Beste Grüße
 
Zuletzt bearbeitet:
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
 
na wenigstens werden die nachteile bei der JS-lösung gleich mit genannt. 8)

guckst du hier: Test - CSS-Hover

HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test - CSS-Hover</title>
<style type=text/css>
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");
}
</style>
</head>
<body>
<h1><img src="images/test3.png" alt="Seitentitel"></h1>
</body>
</html>

EDIT:
Allerdings würd ich noch ein transparentes image zwischen <h1></h1> machen.
wegen dem alternativen text und ggf. einem link

EDIT2:
Habs mal rein editiert ;)
 
Zuletzt bearbeitet:
Zurück
Oben