Zoom: Positionierung

Die Zoom-Funktion bietet viele verschiedene Möglichkeiten, wie die Zoombilder auf der Seite positioniert werden können. Einerseits kann man globale Einstellungen vornehmen. Andererseits können diese auch für jedes einzelne Bild individuell geändert werden.

Globale Positionierung

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:

• Absolute Positionierung bezüglich des Browser Fensters
• Relative Positionierung bezüglich eines Elementes der Webseite

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>

Globale absolute Positionierung

Es gibt die folgenden Einstellungen zur absoluten Positionierungen bezüglich des Browser-Fensters (Angaben jeweils für HAlign, VAlign):

• Left, Top
• Right, Bottom
• Center, Middle
• ToCenter, ToMiddle (Standard)

Diese Werte können unabhängig voneinander für Zoom.VAlign und Zoom.HAlign vorgenommen werden.

Left, Right, Top, Bottom

Bei den Einstellungen Left, Right bzw. Top und Bottom kann mit HMargin bzw. VMargin eingestellt werden, wie weit die Zoombilder vom Fensterrand positioniert werden sollen.

Center, Middle

Das Zoombild wird genau in die Mitte des Browser-Fensters positioniert.

ToCenter, ToMiddle (Standard)

Bei dieser Einstellung positioniert sich das Zoombild in Richtung Fenstermitte und zwar wiefolgt:

Denke dir eine Linie vom Zentrum des kleinen Bildes zum Zentrum des Browser-Fensters. Wenn das Zoombild 2/3 so gross ist wie das Browser-Fenster, wird sein Zentrum 2/3 auf dieser Linie in Richtung Fenstermitte bewegt. Wenn das Zoombild kleiner ist entsprechend weniger weit. Dies ergibt eine «gefälligere» Darstellung für nicht allzu grosse Zoombilder.

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.

Globale relative Positionierung

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>

TargetElement

ID eines beliebigen Bezugselementes auf der Webseite.

TargetOffsetX, TargetOffsetY

Die Position links oben des Zoombildes kann um einen Offset bezüglich des Bezugselementes in X- und Y-Richtung verschoben werden.

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>

Individuelle Positionierung

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 )

ID

ID des HTML-Elementes, bei dem der Zoom beginnen soll. Dies ist in der Regel die ID des Vorschaubildes, kann aber ein beliebiges HTML auf der Seite sein.

ZoomUrl

Pfad und Dateiname des Zoombildes.

XOffset, YOffset (Optional)

Die Position relativ zum Bezugselement kann um einen Offset in X- und Y-Richtung verschoben werden.

RefElementID (Optional)

ID des HTML-Elementes, bezüglich dem das Zoombild positioniert werden soll. Wird dieses Argument nicht angegeben, wird das Element ID selbst zum Bezugselement.

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.