Die Zoom-Funktion bietet verschiedene Möglichkeiten, die Zoombilder auf der Seite zu positionieren. Einerseits kann man globale Einstellungen vornehmen. Andererseits können diese auch für jedes einzelne Bild individuell geändert werden.
Wenn ein Zoom-Bild vollständig im Fenster des Browsers Platz hat, wird es in seiner vollen Grösse, d.h. im Massstab 1:1 angezeigt. Ist das Browser-Fenster zu klein, hängt es von Zoom.SizeLimit ab, auf welche Grösse das Zoom-Bild beschränkt wird. Standard ist Zoom.SizeLimit = 'Window'.
<script type="text/javascript"> Zoom.SizeLimit = 'Window'; </script>
Mögliche Werte für SizeLimit sind:
Bei Änderungen der Browser-Fenstergrösse oder Orientierung, während ein Zoom-Bild dargestellt wird, wird dieses nach der Änderung der Fenstergrösse automatisch verschoben und der neuen Grösse angepasst.
Die globalen Einstellungen für die Positionierung der Zoombilder wird für alle jene Bilder verwendet, bei denen keine individuellen Einstellungen gemacht werden. Die globale Positionierung der Zoombilder kann horizontal und vertikal unabhängig voneinander eingestellt werden. Es gibt zwei mögliche Bezugssysteme für die Positionierung:
Die globale Standard-Positionierung ist wiefolgt eingestellt:
<script type="text/javascript"> Zoom.HAlign = 'ToCenter'; // 'Left', 'Center', 'Right', 'Relative' Zoom.VAlign = 'ToMiddle'; // 'Top', 'Middle', 'Bottom', 'Relative' Zoom.HMargin = 0; Zoom.VMargin = 0; Zoom.TargetElement = ''; Zoom.TargetOffsetX = 0; Zoom.TargetOffsetY = 0; </script>
Es gibt die folgenden Einstellungen zur absoluten Positionierungen bezüglich des Browser-Fensters:
Die Zoom-Funktion versucht das Bild immer möglichst ganz innerhalb des Fensters zu platzieren. Wenn also aufgrund einer Margin-Einstellung das Zoombild teilweise ausserhalb des Fensters zu liegen käme, wird es ins Fenster zurück geschoben. Wenn es nicht vollständig innerhalb des Fensters Platz hat, wird es oben/links-Bündig platziert.
Zoombilder können auch bezüglich eines beliebigen Elementes auf der Webseite positioniert werden. Der Punkt links oben des Zoombildes bezieht sich dann auf den Punkt links oben des Bezugselementes. Die globale relative Positionierung wird wiefolgt eingestellt:
<script type="text/javascript"> Zoom.HAlign = 'Relative'; Zoom.VAlign = 'Relative'; Zoom.TargetElement = 'ZoomPos'; Zoom.TargetOffsetX = 0; Zoom.TargetOffsetY = 0; </script>
Das Bezugselement muss eine eindeutige ID bekommen, welche man der Zoom-Funktion mit TargetElement bekannt gibt. Jedes beliebige HTML-Element kann als Bezugselement dienen.
Beispiel:
<div id="ZoomPos" style="width:300px; height:200px"> In diesem Bereich werden die Zoombilder angezeigt... </div>
Die globalen Einstellungen für die Zoombilder können für jedes einzelne Zoombild überschrieben werden. Die individuelle Positionierung ist jedoch immer relativ zu einem Bezugselement. Als Bezugselement kann auch das Vorschaubild selbst dienen.
Die individuelle Positionierung wird beim Aufruf der Funktion ZoomIn vorgenommen:
ZoomIn( ID, ZoomUrl, XOffset, YOffset, RefElementID )
Hinweis: Wenn keines der optionalen Argumente angegeben wird, so werden für das Zoombild die globalen Einstellungen verwendet. Sobald eines der optionalen Argumente angegeben wird, werden die globalen Einstellungen überschrieben. Dabei wird das Zoombild immer relativ zu einem HTML-Element positioniert, entweder zum Element ID oder falls angegeben zum Element RefElementID.
Beispiel
: <a href="javascript:ZoomIn('pic1','zoom1.jpg',0,0,'ZoomPos1')"> <img id="pic1" src="vorschau1.jpg" width="200" height="150" alt="..."> </a> : <div id="ZoomPos1" style="width:400px; height:300px;"> Hier wird das Zoombild angezeigt... </div>
Im Beispiel oben wird ein div-Element auf der Seite platziert, in welchem alle Zoombilder angezeigt werden sollen. Das div-Element erhält die ID ZoomPos1. Beim Aufruf der Funktion ZoomIn wird diese ID als Argument übergeben.
Das Zoombild startet beim img-Element mit der ID pic1 mit der Grösse dieses Elementes und zoomt zum div-Element mit der ID ZoomPos1. Dabei wird das Zoombild in seiner originalen Grösse angezeigt.