<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="imagetoolbar" content="no">
<title>Javascript Zoom Beispiel - Projekte - Walter Bislin</title>
<script src="zoomX.js" type="text/javascript"></script>
<script type="text/javascript">
// default settings (optional):
Zoom.BorderColor = 'black';
Zoom.BorderWidth = 1;
Zoom.TimeSpan = 500;
Zoom.TimerInterval = 40; // 40 ms = 25 fps (frames per second)
Zoom.HideSmall = false; // to hide small image during zoom
Zoom.HAlign = 'ToCenter'; // 'Left', 'Center', 'Right'
Zoom.VAlign = 'ToMiddle'; // 'Top', 'Middle', 'Bottom'
Zoom.HMargin = 0;
Zoom.VMargin = 0;
// ZoomDebug();
</script>
<style type="text/css">
.Zoomable { cursor:url(stuff/magplus.gif), url(stuff/magplus.cur), auto; }
#ZoomPic { cursor:url(stuff/magminus.gif), url(stuff/magminus.cur), auto; }
</style>
</head><body>
<h1>Javascript Zoom Beispiel</h1>
<p>
Oft möchte man auf einer Webseite gleichzeitig eine Reihe von Vorschaubildchen zeigen, die schnell geladen sind. Der Besucher soll aber auch je eine grosse Version davon ansehen können, ohne dass er zwischen mehreren Seiten hin und her navigieren muss. Hier die Lösung:
</p>
<p>
<table style="width:100%; border:none;"><tr>
<td style="text-align:center; width:50%;">
<a href="javascript:ZoomIn( 'zoomID', 'images/big_picture.jpg' )" class="Zoomable"
><img id="zoomID" src="images/small_picture.jpg" width="200" height="127" alt="Bild vergrössern" border="0"></a>
</td><td style="text-align:center; width:50%;">
<a href="javascript:ZoomIn( 'zoomID2', 'images/filisur_zoom.jpg' )" class="Zoomable"
><img id="zoomID2" src="images/filisur_small.jpg" width="200" height="140" alt="Bild vergrössern" border="0"></a>
</td>
</tr></table>
</p>
<p>Klicke auf ein Bild um die Zoom-Funktion in Aktion zu sehen!</p>
<p>
Beachte, dass die grossen Bilder bereits beim Betrachten der Vorschaubilder im Hintergrund nachgeladen werden, sodass sie in der Regel beim Anklicken der Vorschau ohne Verzögerung sofort erscheinen!
</p>
</body>
</html>