JavaScripts -> Bilder -> Bild anzeigen, Zoomen und Scrollen
Mit diesem Script kann man ein Bild anzeigen, zoomen und scrollen (Ähnlich wie z.B. eine Onlinekarte) Das Script benötigt zusätzlich einige Bilder, diese sind auch im Downloadbereich verfügbar.
Hinweis: Der Zoomer-Scroller-Viewer funktioniert im Internet Explorer anscheinend nur im "Quirks Mode", also auf nicht standardkonformen Seiten.
Kompatibilität getestet: 
Script-Code
<script type="text/javascript">
<!--
// = = =========================================================================== = =
// = = Zoomer-Scroller-Viewer v1.0 (c) 2004 Triple-M / http://www.htmlarsenal.de = =
// = = =========================================================================== = =
// -----------------------------------------------------------------------------------
// -- Dieses Script und viele andere im --
// -- This script and many more in the --
// -----------------------------------------------------------------------------------
// -- HTML ARSENAL - Die Quelle für HTML, JavaScript, PHP --
// -- HTML ARSENAL - Your Source for HTML, JavaScript, PHP --
// -----------------------------------------------------------------------------------
// -- -= http://www.htmlarsenal.de =- --
// -----------------------------------------------------------------------------------
// Sie dürfen dieses Script für nicht-kommerzielle Zwecke nutzen, wenn diese Urheber-Notiz erhalten bleibt.
// You may use this Script for non-commercial causes as long as you include this copyright notice.
// Benutzung / Usage:
// ==================
// Fügen Sie an der Stelle Ihres Dokumentes, an der der Zoomer-Scroller-Viewer erscheinen soll, ein Script mit dem Inhalt
// zsv(); ein. Wichtig: Legen Sie im Abschnitt "Veränderbare Einstellungen" wenige Zeilen unter diesem Absatz
// das zu ladende Bild fest!
// Include a script with the content zsv(); at the position of your document where the zoomer-scroller-viewer shall be displayed.
// Important: Be sure to set the image to be loaded in the area "Adjustable Settings" immediately after this paragraph first!
// Veränderbare Einstellungen / Adjustable Settings
// ================================================
var zsv_image_url="/pics/examples/zoomphoto.jpg"; // URL des anzuzeigenden Bildes / URL of image to be displayed
var zsv_image_width=1024; // Breite des Bildes (Pixel) / width of the image
var zsv_image_height=768; // Höhe des Bildes (Pixel) / height of the image
var zsv_start_zoom=25; // Zoom-Faktor am Beginn / zoom when started
var zsv_start_x=50; // X-Wert d. Mittelpunkt des Bildes zum Beginn (%) / X-Value of the image center when started
var zsv_start_y=50; // Y-Wert d. Mittelpunkt des Bildes zum Beginn (%) / Y-Value of the image center when started
zsv_zoom_min=12.5; // Minimaler Zoom-Wert / minimum zoom value
zsv_zoom_max=400; // Maximaler Zoom-Wert / maximum zoom value
var zsv_viewport_width=256; // Ausgabebereich-Breite / width of output area
var zsv_viewport_height=192; // Ausgabebereich-Höhe / height of output area
var zsv_scroll_percentage=20; // Schrittweite in %, die gescrollt werden soll / step length in % to be scrolled
var zsv_ctrlpics_prefix="/pics/examples/"; // Pfad zu den Icon-Bildern / path to look for icons
// NOTIZ: Die Icon-Bilder heißen up.gif, left.gif, right.gif, down.gif, zoomin.gif und zoomout.gif
// NOTE: The icons are called up.gif, left.gif, right.gif, down.gif, zoomin.gif and zoomout.gif
// Script-Code
// ===========
// Ab hier bitte nichts mehr verändern
// Please do not change anything from here on
var zsv_x;
var zsv_y;
var zsv_zoom;
function zsv() {
var eff_w,eff_h,eff_x,eff_y;
eff_w=Math.round(zsv_image_width*zsv_start_zoom/100);
eff_h=Math.round(zsv_image_height*zsv_start_zoom/100);
eff_x=Math.round((zsv_viewport_width/2)-(eff_w*zsv_start_x/100));
eff_y=Math.round((zsv_viewport_height/2)-(eff_h*zsv_start_y/100));
zsv_x=zsv_start_x;
zsv_y=zsv_start_y;
zsv_zoom=zsv_start_zoom;
document.write('<table style="border-collapse:collapse">');
document.write('<tr><td colspan="3" style="text-align:center; padding:1px">');
document.write('<img src="'+zsv_ctrlpics_prefix+'up.gif" alt="" style="border:0px; cursor:pointer" onClick="zsv_scroll(0)" />');
document.write('<\/td><\/tr>');
document.write('<tr><td style="vertical-align:middle; padding:1px">');
document.write('<img src="'+zsv_ctrlpics_prefix+'left.gif" alt="" style="border:0px; cursor:pointer" onClick="zsv_scroll(1)" />');
document.write('<\/td><td style="padding:0px; width:'+zsv_viewport_width+'px; height:'+zsv_viewport_height+'px">');
document.write('<div style="margin:0px; padding:0px; overflow:hidden; width:'+zsv_viewport_width+'px; height:'+zsv_viewport_height+'px">');
document.write('<img id="zsvimg" src="'+zsv_image_url+'" alt="" style="position:relative; left:'+eff_x+'px; top:'+eff_y+'px; width:'+eff_w+'px; height:'+eff_h+'px" />');
document.write('<\/div><\/td><td style="vertical-align:middle:padding:1px">');
document.write('<img src="'+zsv_ctrlpics_prefix+'right.gif" alt="" style="border:0px; cursor:pointer" onClick="zsv_scroll(2)" />');
document.write('<\/td><\/tr>');
document.write('<tr><td colspan="3" style="text-align:center; padding:1px">');
document.write('<img src="'+zsv_ctrlpics_prefix+'down.gif" alt="" style="border:0px; cursor:pointer" onClick="zsv_scroll(3)" />');
document.write('<\/td><\/tr>');
document.write('<tr><td colspan="3" style="text-align:center; vertical-align:middle; padding:1px">');
document.write('<img src="'+zsv_ctrlpics_prefix+'zoomin.gif" alt="" style="border:0px; cursor:pointer" onClick="zsv_zoom_in()" />');
document.write('<div style="display:inline; width:40px; height:100%; margin-left:2px; margin-right:2px; background-color:#c0c0c0; font-family:Verdana,sans-serif; font-size:10px; border:1px solid #000000" id="zsvzoom">'+zsv_start_zoom+'%<\/div>');
document.write('<img src="'+zsv_ctrlpics_prefix+'zoomout.gif" alt="" style="border:0px; cursor:pointer" onClick="zsv_zoom_out()" />');
document.write('<\/td><\/tr><\/table>');
}
function zsv_compute() {
var eff_w,eff_h,eff_x,eff_y,imgs;
eff_w=Math.round(zsv_image_width*zsv_zoom/100);
eff_h=Math.round(zsv_image_height*zsv_zoom/100);
eff_x=Math.round((zsv_viewport_width/2)-(eff_w*zsv_x/100));
eff_y=Math.round((zsv_viewport_height/2)-(eff_h*zsv_y/100));
imgs=document.getElementById("zsvimg").style;
imgs.left=eff_x+"px";
imgs.top=eff_y+"px";
imgs.width=eff_w+"px";
imgs.height=eff_h+"px";
}
function zsv_zoom_in() {
zsv_zoom*=2;
if(zsv_zoom>zsv_zoom_max)zsv_zoom=zsv_zoom_max;
document.getElementById("zsvzoom").firstChild.nodeValue=zsv_zoom+"%";
zsv_compute();
}
function zsv_zoom_out() {
zsv_zoom/=2;
if(zsv_zoom<zsv_zoom_min)zsv_zoom=zsv_zoom_min;
document.getElementById("zsvzoom").firstChild.nodeValue=zsv_zoom+"%";
zsv_compute();
}
function zsv_scroll(dir) {
var step;
step=zsv_scroll_percentage*((zsv_viewport_width*100)/(zsv_image_width*zsv_zoom));
switch(dir) {
case 0: zsv_y-=step; break;
case 1: zsv_x-=step; break;
case 2: zsv_x+=step; break;
case 3: zsv_y+=step; break;
}
zsv_compute();
}
// ----------------------------
// -- Ende / End Script-Code --
// ----------------------------
// -- Zoomer-Scroller-Viewer --
// -- Author: Triple-M --
// -- www.htmlarsenal.de --
// -- 18.Apr.2004 --
// ----------------------------
//-->
</script>
<!--
// = = =========================================================================== = =
// = = Zoomer-Scroller-Viewer v1.0 (c) 2004 Triple-M / http://www.htmlarsenal.de = =
// = = =========================================================================== = =
// -----------------------------------------------------------------------------------
// -- Dieses Script und viele andere im --
// -- This script and many more in the --
// -----------------------------------------------------------------------------------
// -- HTML ARSENAL - Die Quelle für HTML, JavaScript, PHP --
// -- HTML ARSENAL - Your Source for HTML, JavaScript, PHP --
// -----------------------------------------------------------------------------------
// -- -= http://www.htmlarsenal.de =- --
// -----------------------------------------------------------------------------------
// Sie dürfen dieses Script für nicht-kommerzielle Zwecke nutzen, wenn diese Urheber-Notiz erhalten bleibt.
// You may use this Script for non-commercial causes as long as you include this copyright notice.
// Benutzung / Usage:
// ==================
// Fügen Sie an der Stelle Ihres Dokumentes, an der der Zoomer-Scroller-Viewer erscheinen soll, ein Script mit dem Inhalt
// zsv(); ein. Wichtig: Legen Sie im Abschnitt "Veränderbare Einstellungen" wenige Zeilen unter diesem Absatz
// das zu ladende Bild fest!
// Include a script with the content zsv(); at the position of your document where the zoomer-scroller-viewer shall be displayed.
// Important: Be sure to set the image to be loaded in the area "Adjustable Settings" immediately after this paragraph first!
// Veränderbare Einstellungen / Adjustable Settings
// ================================================
var zsv_image_url="/pics/examples/zoomphoto.jpg"; // URL des anzuzeigenden Bildes / URL of image to be displayed
var zsv_image_width=1024; // Breite des Bildes (Pixel) / width of the image
var zsv_image_height=768; // Höhe des Bildes (Pixel) / height of the image
var zsv_start_zoom=25; // Zoom-Faktor am Beginn / zoom when started
var zsv_start_x=50; // X-Wert d. Mittelpunkt des Bildes zum Beginn (%) / X-Value of the image center when started
var zsv_start_y=50; // Y-Wert d. Mittelpunkt des Bildes zum Beginn (%) / Y-Value of the image center when started
zsv_zoom_min=12.5; // Minimaler Zoom-Wert / minimum zoom value
zsv_zoom_max=400; // Maximaler Zoom-Wert / maximum zoom value
var zsv_viewport_width=256; // Ausgabebereich-Breite / width of output area
var zsv_viewport_height=192; // Ausgabebereich-Höhe / height of output area
var zsv_scroll_percentage=20; // Schrittweite in %, die gescrollt werden soll / step length in % to be scrolled
var zsv_ctrlpics_prefix="/pics/examples/"; // Pfad zu den Icon-Bildern / path to look for icons
// NOTIZ: Die Icon-Bilder heißen up.gif, left.gif, right.gif, down.gif, zoomin.gif und zoomout.gif
// NOTE: The icons are called up.gif, left.gif, right.gif, down.gif, zoomin.gif and zoomout.gif
// Script-Code
// ===========
// Ab hier bitte nichts mehr verändern
// Please do not change anything from here on
var zsv_x;
var zsv_y;
var zsv_zoom;
function zsv() {
var eff_w,eff_h,eff_x,eff_y;
eff_w=Math.round(zsv_image_width*zsv_start_zoom/100);
eff_h=Math.round(zsv_image_height*zsv_start_zoom/100);
eff_x=Math.round((zsv_viewport_width/2)-(eff_w*zsv_start_x/100));
eff_y=Math.round((zsv_viewport_height/2)-(eff_h*zsv_start_y/100));
zsv_x=zsv_start_x;
zsv_y=zsv_start_y;
zsv_zoom=zsv_start_zoom;
document.write('<table style="border-collapse:collapse">');
document.write('<tr><td colspan="3" style="text-align:center; padding:1px">');
document.write('<img src="'+zsv_ctrlpics_prefix+'up.gif" alt="" style="border:0px; cursor:pointer" onClick="zsv_scroll(0)" />');
document.write('<\/td><\/tr>');
document.write('<tr><td style="vertical-align:middle; padding:1px">');
document.write('<img src="'+zsv_ctrlpics_prefix+'left.gif" alt="" style="border:0px; cursor:pointer" onClick="zsv_scroll(1)" />');
document.write('<\/td><td style="padding:0px; width:'+zsv_viewport_width+'px; height:'+zsv_viewport_height+'px">');
document.write('<div style="margin:0px; padding:0px; overflow:hidden; width:'+zsv_viewport_width+'px; height:'+zsv_viewport_height+'px">');
document.write('<img id="zsvimg" src="'+zsv_image_url+'" alt="" style="position:relative; left:'+eff_x+'px; top:'+eff_y+'px; width:'+eff_w+'px; height:'+eff_h+'px" />');
document.write('<\/div><\/td><td style="vertical-align:middle:padding:1px">');
document.write('<img src="'+zsv_ctrlpics_prefix+'right.gif" alt="" style="border:0px; cursor:pointer" onClick="zsv_scroll(2)" />');
document.write('<\/td><\/tr>');
document.write('<tr><td colspan="3" style="text-align:center; padding:1px">');
document.write('<img src="'+zsv_ctrlpics_prefix+'down.gif" alt="" style="border:0px; cursor:pointer" onClick="zsv_scroll(3)" />');
document.write('<\/td><\/tr>');
document.write('<tr><td colspan="3" style="text-align:center; vertical-align:middle; padding:1px">');
document.write('<img src="'+zsv_ctrlpics_prefix+'zoomin.gif" alt="" style="border:0px; cursor:pointer" onClick="zsv_zoom_in()" />');
document.write('<div style="display:inline; width:40px; height:100%; margin-left:2px; margin-right:2px; background-color:#c0c0c0; font-family:Verdana,sans-serif; font-size:10px; border:1px solid #000000" id="zsvzoom">'+zsv_start_zoom+'%<\/div>');
document.write('<img src="'+zsv_ctrlpics_prefix+'zoomout.gif" alt="" style="border:0px; cursor:pointer" onClick="zsv_zoom_out()" />');
document.write('<\/td><\/tr><\/table>');
}
function zsv_compute() {
var eff_w,eff_h,eff_x,eff_y,imgs;
eff_w=Math.round(zsv_image_width*zsv_zoom/100);
eff_h=Math.round(zsv_image_height*zsv_zoom/100);
eff_x=Math.round((zsv_viewport_width/2)-(eff_w*zsv_x/100));
eff_y=Math.round((zsv_viewport_height/2)-(eff_h*zsv_y/100));
imgs=document.getElementById("zsvimg").style;
imgs.left=eff_x+"px";
imgs.top=eff_y+"px";
imgs.width=eff_w+"px";
imgs.height=eff_h+"px";
}
function zsv_zoom_in() {
zsv_zoom*=2;
if(zsv_zoom>zsv_zoom_max)zsv_zoom=zsv_zoom_max;
document.getElementById("zsvzoom").firstChild.nodeValue=zsv_zoom+"%";
zsv_compute();
}
function zsv_zoom_out() {
zsv_zoom/=2;
if(zsv_zoom<zsv_zoom_min)zsv_zoom=zsv_zoom_min;
document.getElementById("zsvzoom").firstChild.nodeValue=zsv_zoom+"%";
zsv_compute();
}
function zsv_scroll(dir) {
var step;
step=zsv_scroll_percentage*((zsv_viewport_width*100)/(zsv_image_width*zsv_zoom));
switch(dir) {
case 0: zsv_y-=step; break;
case 1: zsv_x-=step; break;
case 2: zsv_x+=step; break;
case 3: zsv_y+=step; break;
}
zsv_compute();
}
// ----------------------------
// -- Ende / End Script-Code --
// ----------------------------
// -- Zoomer-Scroller-Viewer --
// -- Author: Triple-M --
// -- www.htmlarsenal.de --
// -- 18.Apr.2004 --
// ----------------------------
//-->
</script>