Kleine Vorschaubilder machen eine Webseite erst so richtig interessant. Nur sollte der Besucher auch die Möglichkeit haben, die auch vergrößern zu können, damit er diese in ihrer vollen Pracht genießen kann. Das ist sogar ohne den Einsatz voluminöser Skripte möglich, denn dazu ist nur der geschickte Einsatz des overflow-Parameters von CSS notwendig.
Dieser Parameter bestimmt, ob der Inhalt eines Parameters gezeigt werden soll, auch wenn der Container für den Inhalt zu klein ist. Mit dem Wert hidden wird die Anzeige der Objekte gezwungenermaßen auf die vorgegebene Größe des DIVs beschränkt. Wird der Wert visible verwendet ist die Darstellung aller Objekte erlaubt.
Wenn zudem mit einer absoluten Positionierung der DIVs gearbeitet wird, ist es notwendig beim Vergrößern der Bilder einen alternativen Umbruch der anderen Seitenelemente zu verhindern. Hierfür wird das Bild einfach über die bestehenden Inhalte der Seite übergestülpt. Zur besseren Veranschaulichung ein Beispiel:
.bildausschnitt{
position: absolute;
width: 100px;
height: 100px;
overflow: hidden;}
Das Bild wird in einen DIV-Container gesteckt, dem die Klassen zugewiesen sind. Mit onMouseOver und onMouseOut werden die overflow-Parameter der Klasse verändert.
Nachfolgend der Code zum einbinden in die HTML-Datei:
<div onMouseOver=this.style.overflow="visible"
onMouseOut=this.style.overflow="hidden" class=bildausschnitt>
<img src="Bildname.jpg" width="623" height="297" alt="" border="0"/></div>
