<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
a
{
color:#CCCCCC;
text-decoration:none;
}
a img
{
border:none;
}
-->
</style>
<script type="text/javascript">
<!--
var drag=false;
var xstart=0;
var lefting=false;
var righting=false;
function down(event)
{
drag=true;
xstart=event.screenX;
}
function getInt(str)
{
var x='';
var not='--0123456789';
for(i=0;i<str.length;i++)
{
if(not.search(str.substr(i,1))>1)
{
x+=str.substr(i,1);
}
}
return x*1;
}
function passt(i)
{
if(i<1)
{
i=1;
}
if(i>388-38-1)
{
i=388-38-1;
}
return i;
}
function ch()
{
document.getElementById('bilder').style.marginLeft='-'+(getInt(document.getElementById('slider').style.left)/(388-38-1)*(45*100-448)-1)+'px';
}
function left()
{
dx=-5;
document.getElementById('slider').style.left=passt(getInt(document.getElementById('slider').style.left)+dx)+'px';
ch();
lefting=true;
setTimeout('checkLeft(-5);',300);
}
function right()
{
dx=5;
document.getElementById('slider').style.left=passt(getInt(document.getElementById('slider').style.left)+dx)+'px';
ch();
righting=true;
setTimeout('checkRight(5);',300);
}
function checkRight(c)
{
if(righting==false)
{
return;
}
dx=c;
document.getElementById('slider').style.left=passt(getInt(document.getElementById('slider').style.left)+dx)+'px';
ch();
setTimeout('checkRight(4);',50);
}
function checkLeft(c)
{
if(lefting==false)
{
return;
}
dx=c;
document.getElementById('slider').style.left=passt(getInt(document.getElementById('slider').style.left)+dx)+'px';
ch();
setTimeout('checkLeft(-4);',50);
}
function move(event)
{
if(drag==false)
{
return;
}
var dx=event.screenX-xstart;
xstart=event.screenX;
if(passt(getInt(document.getElementById('slider').style.left)+dx)!=getInt(document.getElementById('slider').style.left)+dx)
{
xstart-=dx-passt(getInt(document.getElementById('slider').style.left)+dx)+getInt(document.getElementById('slider').style.left);
}
document.getElementById('slider').style.left=passt(getInt(document.getElementById('slider').style.left)+dx)+'px';
ch();
}
function up()
{
drag=false;
lefting=false;
righting=false;
}
//-->
</script>
</head>
<body onMouseUp="javascript:up();" onMouseMove="javascript:move(event);">
<div style="overflow: hidden; width:448px; height:125px;">
<div style="overflow: hidden; position:absolute; margin-left:0px; height:100px; width:448px; margin-top:0px;">
<div id="bilder" style="overflow: hidden; margin-left:0px; width:4500px; height:100px; margin-top:0px;">
<img width="4500" height="100" style="position:absolute; margin-left:0px;" src="../fotogalerie/wide.php" usemap="#map">
<map name="map">
<area shape="rect" coords="0,0,100,100" href="slide.php?id=0"><area shape="rect" coords="100,0,200,100" href="slide.php?id=1"><area shape="rect" coords="200,0,300,100" href="slide.php?id=2"><area shape="rect" coords="300,0,400,100" href="slide.php?id=3"><area shape="rect" coords="400,0,500,100" href="slide.php?id=4"><area shape="rect" coords="500,0,600,100" href="slide.php?id=5"><area shape="rect" coords="600,0,700,100" href="slide.php?id=6"><area shape="rect" coords="700,0,800,100" href="slide.php?id=7"><area shape="rect" coords="800,0,900,100" href="slide.php?id=8"><area shape="rect" coords="900,0,1000,100" href="slide.php?id=9"><area shape="rect" coords="1000,0,1100,100" href="slide.php?id=10"><area shape="rect" coords="1100,0,1200,100" href="slide.php?id=11"><area shape="rect" coords="1200,0,1300,100" href="slide.php?id=12"><area shape="rect" coords="1300,0,1400,100" href="slide.php?id=13"><area shape="rect" coords="1400,0,1500,100" href="slide.php?id=14"><area shape="rect" coords="1500,0,1600,100" href="slide.php?id=15"><area shape="rect" coords="1600,0,1700,100" href="slide.php?id=16"><area shape="rect" coords="1700,0,1800,100" href="slide.php?id=17"><area shape="rect" coords="1800,0,1900,100" href="slide.php?id=18"><area shape="rect" coords="1900,0,2000,100" href="slide.php?id=19"><area shape="rect" coords="2000,0,2100,100" href="slide.php?id=20"><area shape="rect" coords="2100,0,2200,100" href="slide.php?id=21"><area shape="rect" coords="2200,0,2300,100" href="slide.php?id=22"><area shape="rect" coords="2300,0,2400,100" href="slide.php?id=23"><area shape="rect" coords="2400,0,2500,100" href="slide.php?id=24"><area shape="rect" coords="2500,0,2600,100" href="slide.php?id=25"><area shape="rect" coords="2600,0,2700,100" href="slide.php?id=26"><area shape="rect" coords="2700,0,2800,100" href="slide.php?id=27"><area shape="rect" coords="2800,0,2900,100" href="slide.php?id=28"><area shape="rect" coords="2900,0,3000,100" href="slide.php?id=29"><area shape="rect" coords="3000,0,3100,100" href="slide.php?id=30"><area shape="rect" coords="3100,0,3200,100" href="slide.php?id=31"><area shape="rect" coords="3200,0,3300,100" href="slide.php?id=32"><area shape="rect" coords="3300,0,3400,100" href="slide.php?id=33"><area shape="rect" coords="3400,0,3500,100" href="slide.php?id=34"><area shape="rect" coords="3500,0,3600,100" href="slide.php?id=35"><area shape="rect" coords="3600,0,3700,100" href="slide.php?id=36"><area shape="rect" coords="3700,0,3800,100" href="slide.php?id=37"><area shape="rect" coords="3800,0,3900,100" href="slide.php?id=38"><area shape="rect" coords="3900,0,4000,100" href="slide.php?id=39"><area shape="rect" coords="4000,0,4100,100" href="slide.php?id=40"><area shape="rect" coords="4100,0,4200,100" href="slide.php?id=41"><area shape="rect" coords="4200,0,4300,100" href="slide.php?id=42"><area shape="rect" coords="4300,0,4400,100" href="slide.php?id=43"><area shape="rect" coords="4400,0,4500,100" href="slide.php?id=44"> </map>
</div>
</div>
<div style="position:absolute; margin-top:100px; width:448px; height:25px; background-color:blue;">
<div style="position:absolute; left:6px; margin-top:1px; color:white;">
<a href="javascript:void(0);" onMouseDown="javascript:left();">←</a>
</div>
<div style="position:absolute; left:30px; right:30px; width:388px; height:25px; background-color:grey;">
<div id="slider" style="position:absolute; height:23px; top:1px; left:1px; width:38px; background-color:lightgrey;" onMouseDown="javascript:down(event);" onMouseMove="javascript:move(event);">
</div>
</div>
<div style="position:absolute; right:6px; margin-top:1px; color:white;">
<a href="javascript:void(0);" onMouseDown="javascript:right();">→</a>
</div>
</div>
</div>
</body>
</html>