JavaScripts -> Struktur -> Layer Scroller

<script type="text/javascript">
<!--

// = = =========================================================================== = =
// = = Arsenal Layer Scroller 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 ein Script mit dem Inhalt
// layerscroller(Breite, Höhe, Bilddimension, Inhaltshöhe, BildOben, BildUnten, BildPosition, Inhalt)
// an der Stelle ein, an der der Layer Scroller erscheinen soll.

// Breite -> die Breite des Scrollers
// Höhe -> die Höhe des Scrollers
// Bilddimension -> Breite und Höhe der Bilder (quadratisch)
// Inhaltshöhe -> die Höhe des Inhaltes
// BildOben -> URL des Bildes "Pfeil nach Oben"
// BildUnten -> URL des Bildes "Pfeil nach Unten"
// BildPostion -> URL des Bildes "Aktuelle Position"
// Inhalt -> Der HTML-Code des zu scrollenden Inhaltes

// Simply include a script with the content
// layerscroller(width, height, image dimension, content height, imageup, imagedown, imageposition, cotent)
// at the position where the layer scroller shall be displayed.

// width -> the width of the scroller
// height -> the height of the scroller
// image dimension -> width and height of the images (squares)
// content height -> the height of the content
// imageup -> URL of the image "Arrow Up"
// imagedown -> URL of the image "Arrow Down"
// imageposition -> URL of the image "Current Position"
// contnent -> HTML-Code of the content to be scrolled

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

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

var cnt=0;
var inter=0;
var dragging=0;
var dragnum=0;
var dragy=0;
var lsw=new Array(), lsh=new Array(), lsiw=new Array(), lsch=new Array();
var mousex=0;
var mousey=0;

function capturemaus(nsevent) {
  if(window.event) {
    mousex=window.event.clientX; // oder x - relativ zum Fenster
    mousey=window.event.clientY; // oder y - relativ zum Fenster
  }
  else {
    mousex=nsevent.pageX; // oder pageX - relativ zum Fenster
    mousey=nsevent.pageY; // oder pageY - relativ zum Fenster
  }
  if(dragging) {
    offset=mousey-dragy;

    var t=parseInt((offset/(lsh[dragnum]-3*lsiw[dragnum]))*(lsh[dragnum]-lsch[dragnum]));
    if(t>0) {
      t=0;
      dragging=0;

      document.getElementById('pos'+dragnum).style.top='0px';
    }
    if(t<(lsh[dragnum]-lsch[dragnum])) {
      t=lsh[dragnum]-lsch[dragnum];
      dragging=0;
      document.getElementById('pos'+dragnum).style.top=(lsh[dragnum]-3*lsiw[dragnum])+'px';
    }
    if(dragging) document.getElementById('pos'+dragnum).style.top=offset+'px';
    document.getElementById('scroller'+dragnum).style.top=t+'px';
  }
}

document.onmousemove=capturemaus;

function layerscroller(width,height,imgwidth,contentheight,upimg,downimg,posimg,content) {

  document.writeln('<table style="width:'+width+'px; height:'+height+'px; overflow:hidden; padding:0px; border-collapse:collapse; table-layout:fixed">');
  document.writeln('<tr><td rowspan="3" style="overflow:hidden; vertical-align:top; align:left; padding:0px; border:none; width:'+(width-imgwidth)+'px; height:'+height+'px">');
  document.writeln('<div style="overflow:hidden; vertical-align:top; align:left; padding:0px; width:'+(width-imgwidth)+'px; height:100%; margin:0px;">');
  document.writeln('<div id="scroller'+cnt+'" style="position:relative; top:0px; left:0px; width:'+(width-imgwidth)+'px; height:'+contentheight+'px; overflow:hidden;">'+content+'<\/div>');
  document.writeln('<\/div>');
  document.writeln('<\/td>');
  document.writeln('<td style="width:'+imgwidth+'px; height:'+imgwidth+'px; padding:0px; border:none"><img src="'+upimg+'" onMouseOver="stop(); inter=window.setInterval(\'scroll('+cnt+',5)\',150)" onMouseOut="stop()" onMouseDown="stop(); inter=window.setInterval(\'scroll('+cnt+',10)\',100)" onMouseUp="stop()" /><\/td><\/tr>');
  document.writeln('<tr><td style="width:'+imgwidth+'px; height:'+(height-2*imgwidth)+'px; padding:0px; border:none; vertical-align:top"><img src="'+posimg+'" id="pos'+cnt+'" style="position:relative; top:0px; left:0px" id="position'+cnt+'" onMouseDown="startdrag('+cnt+')" onMouseUp="stopdrag()" onDrag="return false" /><\/td><\/tr>');
  document.writeln('<tr><td style="vertical-align:top; width:'+imgwidth+'px; height:'+imgwidth+'px; padding:0px; border:none"><img src="'+downimg+'" onMouseOver="stop(); inter=window.setInterval(\'scroll('+cnt+',-5)\',150)" onMouseOut="stop()" onMouseDown="stop(); inter=window.setInterval(\'scroll('+cnt+',-10)\',100)" onMouseUp="stop()" /><\/td><\/tr>');
  document.writeln('<\/table>');
  lsw[cnt]=width;
  lsh[cnt]=height;
  lsiw[cnt]=imgwidth;
  lsch[cnt]=contentheight;

  cnt++;
}

function startdrag(num) {
  dragging=1;
  dragnum=num;
  dragy=mousey-parseInt(document.getElementById('pos'+dragnum).style.top);
}

function stopdrag() {
  if(dragging)dragging=0;
}


function scroll(num, way) {
  var t=parseInt(document.getElementById('scroller'+num).style.top);
  if((t+way)>0)t=-way;
  if((t+way)<(lsh[num]-lsch[num]))t=(lsh[num]-lsch[num])-way;
  document.getElementById('pos'+num).style.top=parseInt((lsh[num]-3*lsiw[num])* ((t+way)/(lsh[num]-lsch[num])))+'px';
  document.getElementById('scroller'+num).style.top=(t+way)+'px';
}

function stop() {
  if(inter)window.clearInterval(inter);
  inter=0;
}

// ----------------------------
// -- Ende / End Script-Code --
// ----------------------------
// -- Layer Scroller --
// -- Author: Triple-M --
// -- www.htmlarsenal.de --
// -- 22.Feb.2004 --
// ----------------------------

//-->
</script>