Thumbnail Galerie
Fernbedienung
Eine Galerie mit Vorschaubildern, bei onmouseover auf diese Thumbnails (Daumennägel) wird das grosse Bild ausgewechselt.
Dieses Script ist wie ein Bildover, aber es braucht kein onMouseOut und nur das Grosse Bild braucht einen Namen, weil nur dies ausgewechselt wird.
Übrigens: Weil wir von Anfang an die grossen Bilder brauchen und vorladen, dürfen wir diese ausnahmsweise per HTML verkleinert als Vorschaubilder nutzen (ohne extra Thumbnails zu erstellen).
Hier wurden, in Ermangelung von grösseren, die vorhandenen kleinen Bilder geladen und dann Vergrössert; was natürlich nicht ernsthaft geht.
Code
HTML für das grosse Bild, welches ausgewechselt wird.
<img class="gallery" src="images/face_0.jpg" name="previewField" alt="Hier die vergrösserten Abbildungen" />
HTML für die kleinen Bilder.
<a href="#" onmouseover="chgImg('previewField','Face1')"><img class="thumb" src="images/face_1.jpg" alt="Bild 1" title="Bild 1" /></a>
eval()
Javascript im Head mit den Imageobjekten, den Variablen in denen die src angegeben wird und der Funktion die aufgerufen wird.
<script type="text/JavaScript">
// Bildobjekte generieren
bgFace = new Image // Variablen werden deklariert
Face1 = new Image
Face2 = new Image
Face3 = new Image
Face4 = new Image
// Bildobjekte Adressen angeben
bgFace.src = "images/face_0.jpg" // Variablen werden initialisiert
Face1.src = "images/face_1.jpg"
Face2.src = "images/face_2.jpg"
Face3.src = "images/face_3.jpg"
Face4.src = "images/face_4.jpg"
// Funktion
function chgImg(imgField,newImg) { // erzeugt eine Function namens 'chgImg'
document[imgField].src=eval(newImg + ".src") // Die eval-Methode erzeugt ein Ergebnis welches in einen TextString verwandelt wird
}
</script>
Der CSS Code.
<style>
img.thumb { width:60px; height:60px; border:0px; float:left}
img.gallery { width:400px; height:400px; border:0px; float:left; border: 1px solid #d0d0d0; margin-right:10px}
.slider { width:77px; height:400px; overflow:auto; border:1px solid #d0d0d0;}
</style>
Alternative
Eine Alternative zu diesem Javascript bietet die CSS Bildgalerie
Check den Code.