JavaScripts -> Bilder -> Image Zoomer

<script type="text/javascript">
<!--
// = = ================================================================= = =
// = = Image Zoomer 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 =- --
// -------------------------------------------------------------------------

// Benutzung
// =========

// In ein HTML-Element, für das das Bild angezeigt werden soll, fügen Sie bitte den folgenden Code ein
// (<tag ...) onMouseOver="imagezoom(Nummer)" onMouseOut="kill()" (...>)
// wobei "Nummer" die Position des Bildes in der Bilderliste ist (beginnend bei 0)
// also z.B. <a onMouseOver="imagezoom(0)" onMouseOut="kill()" ...>

// Usage
// =====

// Insert the following code in a HTML-Element, for that the image should be displayed:
// (<tag ...) onMouseOver="imagezoom(Number)" onMouseOut="kill()" (...>)
// where "Number" means the position of the image in the image list (starting with 0)
// e.g.: <a onMouseOver="imagezoom(0)" onMouseOut="kill()" ...>

// Veränderbare Einstellungen / Adjustable Settings
// ================================================

var imgurls=new Array("../../../../pics/examples/gallery01.jpg", "../../../../pics/examples/gallery02.jpg", "../../../../pics/examples/gallery03.jpg", "../../../../pics/examples/tt0.gif");
  // Bilderliste. Sie können beliebig Bilder entfernen oder hinzufügen
  // Image list. You may freely remove or add images.

var delay=20; // Pause bei jedem Zoom-Durchgang / Delay for each zoom step
var steps=20; // Anzahl der Zoom-Schritte / number of zoom steps

// Script-Code
// ===========

// Ab hier bitte nichts mehr verändern
// Please do not change anything from here on

var mousex=0;
var mousey=0;

var images=new Array();
var i;
var displayed=0;
var to=0;

for(i=0;i<imgurls.length;i++) {
  images[i]=new Image();
  images[i].src=imgurls[i];
}

function capturemaus(nsevent) {
  if(window.event) {
    mousex=window.event.clientX;
    mousey=window.event.clientY;
  }
  else {
    mousex=nsevent.pageX;
    mousey=nsevent.pageY;
  }
  if(displayed) {
    el=document.getElementById("imagetip");
    el.style.left=(mousex+12)+"px";
    el.style.top=(mousey+20)+"px";
  }
}

document.onmousemove=capturemaus;


function imagezoom(num) {
  if(images[num].complete) {
    var el;
    displayed=1;
    el=document.createElement("img");
    el.src=images[num].src;
    el.style.position="absolute";
    el.style.left=(mousex+12)+"px";
    el.style.top=(mousey+20)+"px";
    el.style.width="1px";
    el.style.height="1px";
    el.setAttribute("id","imagetip");
    document.getElementsByTagName("body")[0].appendChild(el);
    to=window.setTimeout("zoomin(0,"+images[num].width+","+images[num].height+")",delay);
  }
}

function zoomin(step,ow,oh) {
  step++;
  var w,h;
  w=Math.round((step*ow)/steps);
  h=Math.round((step*oh)/steps);
  el.style.width=w+"px";
  el.style.height=h+"px";

  if(step<steps) to=window.setTimeout("zoomin("+step+","+ow+","+oh+")",delay);
  else to=0;
}


function kill() {
  displayed=0;
  if(to)window.clearTimeout(to);
  var tip=document.getElementById("imagetip");
  tip.parentNode.removeChild(tip);
}

// ----------------------------
// -- Ende / End Script-Code --
// ----------------------------
// -- Image Zoomer --
// -- Author: Triple-M --
// -- www.htmlarsenal.de --
// -- 24.Mar.2004 --
// ----------------------------

//-->
</script>