nicht angemeldet
Hi,
es gibt mehrere Möglichkeiten bei CSS um die Bilder zu laden.
Wenn du im CSS-Code beim Hovern ganz normal als Bildverweis den Pfad zum zweiten Bild angibst, wird dieses auch erst in dem Moment geladen, wo du mit der Maus über dein Thumbnail fährst.
Siehe z.B. hier: http://aktuell.de.selfhtml.org/artikel/css/mouseover/index.htm#a4
Alternativ kann man - um eben ein Nachladen zu verhindern (weil das z.B. bei Grafiken in Menüs sonst unschöne Flackereffekte gibt) - beide Grafiken in einem Bild zusammenfassen. D.h. du hast nur eine einzige Grafik, auf der beide Bilder vorhanden sind. Z.B. in der linken Hälfte Bild #1 und rechts Bild #2.
Im Grundzustand siehst du dann nur die linke Hälfte vom Bild wo sich Abbildung #1 befindet (wäre in deinem Fall das Thumb), beim Hovern wird das Bild dann lediglich so verschoben, dass Abbildung #1 aus dem Blickfeld rückt, und Abbildung #2 zu sehen ist.
Sinnvoll ist das i.d.R. natürlich nur, wenn die beiden Bilder gleich groß sind.
Mit dem code aus obigem Link sähe das so aus:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Rollover mit CSS - Beispiel 5</title>
<style>
a { display:block;
background-image:url(button.gif);
width:120px; height:30px }
a:hover { background-image:url(button.gif);
background-position: 0px -30px;
}
</style>
</head>
<body>
<h1>Bild-Button mit CSS</h1>
<p><a href="#"> </a></p>
</body>
</html>
~~~damit würde das Bild beim Hovern als um 30 Pixel nach unten geschoben (dazu brauchst du dann eben aber ein 60 Pixel großes Bild, wo in der unteren Hälfte das Standardbild ist und in der oberen das Hoverbild).