Hallo!
Ich möchte auf meiner Website ein Fotoalbum implementieren. Habe mir auch schon ein nettes Script besorgt, das wunderbar funktioniert. Allerdings gibt es eine kleine Macke: sobald das Browserfenster etwas kleiner ist, erscheint unten ein Scrollbalken, obwohl weiter rechts rein gar nichts mehr ist. Es könnte am dynamisch positionierten <div></div> Bereich liegen, der jedoch rechts und links mit dem clip-attribut abgeschnitten wird...aber seht euch das script doch einmal selbst an:
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
.text { font-family:arial; font-size:9pt; color:#003399; }
a:link { font-family:arial; color:#0055bb; font-size:10pt; text-decoration: none; font-style:normal; }
a:visited { font-family:arial; font-size:10pt; color:#aaaaaa; font-style:italic }
a:active { font-family:arial; font-size:10pt; color:#aaaaaa; font-style:normal; }
a:hover { font-family:arial; font-size:10pt; color: #aa0000; text-decoration: underline; cursor: hand; }
body {margin-top:0px; margin-left:0px; margin-right:0px; margin-bottom:0px;
scrollbar-base-color:#979bfd; scrollbar-track-color:#ffffff; scrollbar-face-color:#979bfd; scrollbar-highlight-color:#979bfd; scrollbar-3d-light-color:#ffffff; scrollbar-dark-shadow-color:#979bfd; scrollbar-shadow-color:#979bfd;
scrollbar-arrow-color:#ffffff}
//-->
</style>
<script language="javascript">
bilder=new Array()
bilder[0]=new Array("tpic1.jpg","tpic1.jpg","Hier steht der Begleittext zu Bild1")
bilder[1]=new Array("tpic1.jpg","tpic1.jpg","Hier steht der Begleittext zu Bild2")
bilder[2]=new Array("tpic1.jpg","tpic1.jpg","Hier steht der Begleittext zu Bild3")
bilder[3]=new Array("tpic1.jpg","tpic1.jpg","Hier steht der Begleittext zu Bild4")
bilder[4]=new Array("tpic1.jpg","tpic1.jpg","Hier steht der Begleittext zu Bild5")
bilder[5]=new Array("tpic1.jpg","tpic1.jpg","Hier steht der Begleittext zu Bild6")
bilder[6]=new Array("tpic1.jpg","tpic1.jpg","Hier steht der Begleittext zu Bild7")
bilder[7]=new Array("tpic1.jpg","tpic1.jpg","Hier steht der Begleittext zu Bild8")
Bildbreite=400//breite der Bilder
Bildhoehe=300//hoehe der Bilder
bildlaufback=new Image()
bildlaufback.src="left.jpg"
bildlaufvor=new Image()
bildlaufvor.src="right.jpg"
schalterbreite=34;
if(document.layers||document.getElementById||!document.all)
fensterbreite=self.innerWidth
else
fensterbreite=self.document.body.clientWidth
vorschauhoehe=100
posx=0;
timer=null
tempo=20
schrittweite=10
function getobj()
{
if(document.layers)
return eval("document.vorschaudiv.document.inhalt")
else if(document.all)
return eval("document.all.inhalt.style")
else if (document.getElementById)
return eval("document.getElementById('inhalt').style")
}
function getobj1()
{
if(document.layers)
return eval("document.vorschaudiv.document.inhalt.document.width")
else if(document.all)
return eval("document.all.inhalt.offsetWidth")
else if (document.getElementById)
return eval("document.getElementById('inhalt').offsetWidth")
}
function getobj2()
{
if(document.layers)
return eval("document.anzeige.document")
else if(document.all)
return eval("document.all.anzeige")
else if (document.getElementById)
return eval("document.getElementById('anzeige')")
}
function vor()
{
if(document.layers)
{
posx=parseInt(getobj().left)
if(parseInt(getobj().left)>(parseInt(getobj1())-(fensterbreite-(schalterbreite*2)))*-1)
{
posx=posx-schrittweite
getobj().left=posx
timer=window.setTimeout('vor()',tempo)
}
}
else if(document.all)
{
posx=parseInt(getobj().pixelLeft)
if(parseInt(getobj().pixelLeft)>(parseInt(getobj1())-(fensterbreite-(schalterbreite*2)))*-1)
{
posx=posx-schrittweite
getobj().left=posx
timer=window.setTimeout('vor()',tempo)
}
}
else if(document.getElementById)
{
posx=parseInt(getobj().left)
if(parseInt(getobj().left)>(parseInt(getobj1())-(fensterbreite-(schalterbreite*2)))*-1)
{
posx=posx-schrittweite
getobj().left=posx
timer=window.setTimeout('vor()',tempo)
}
}
}
function zurueck()
{
if(document.layers)
{
posx=parseInt(getobj().left)
if(parseInt(getobj().left)<0)
{
posx=posx+schrittweite
getobj().left=posx
timer=window.setTimeout('zurueck()',tempo)
}
}
else if(document.all)
{
posx=parseInt(getobj().pixelLeft)
if(parseInt(getobj().pixelLeft)<0)
{
posx=posx+schrittweite
getobj().left=posx
timer=window.setTimeout('zurueck()',tempo)
}
}
else if(document.getElementById)
{
posx=parseInt(getobj().left)
if(parseInt(getobj().left)<0)
{
posx=posx+schrittweite
getobj().left=posx
timer=window.setTimeout('zurueck()',tempo)
}
}
}
function anzeigen(nr)
{
atext="<table width='100%'><tr><td align='center'><img src='"+bilder[nr][1]+"'></td></tr>";
atext=atext+"<tr><td align='center'><p class='beschreibung'>"+bilder[nr][2]+"</p></td></tr></table>"
if(document.layers)
{
getobj2().open()
getobj2().write(atext)
getobj2().close()
}
else
getobj2().innerHTML=atext
}
</script>
</head>
<body bgcolor="#ffffff">
<p> </p>
<script language="javascript">
if(document.all)
fensterbreite=document.body.clientWidth
if(document.layers)
{
document.write('<layer top="0" left="0"><p><a href="javascript:void(0)" onmouseover="zurueck()" onmouseout="clearTimeout(timer)"> <img src="'+bildlaufback.src+'" border="0"></a></p></layer>')
document.write('<layer name="vorschaudiv" top="0" left="'+schalterbreite+'" clip="0,0,'+(fensterbreite-(schalterbreite*2))+','+vorschauhoehe+'">')
document.write('<layer name="inhalt" left="0" top="0">')
document.write('<table><tr>')
for (i=0;i<=bilder.length-1;i++)
{
document.write('<td><a href="javascript:anzeigen('+i+')"><img src="'+bilder[i][0]+'" border="0"></a></td>')
}
document.write("</tr></table>")
document.write("</layer></layer>")
document.write('<layer left="'+(fensterbreite-(schalterbreite))+'" top="0" ><p><a href="javascript:void(0)" onmouseover="vor()" onmouseout="clearTimeout(timer)"> <img src="'+bildlaufvor.src+'" border="0"></a></p></layer>')
}
else
{
document.write('<div style="position:absolute;left:0;top:0;"><p><a href="javascript:void(0)" onmouseover="zurueck()" onmouseout="clearTimeout(timer)"><img src="'+bildlaufback.src+'" border="0"></a></p></div>')
document.write('<div id="vorschaudiv" style="position:absolute;top:0;left:'+schalterbreite+';clip:rect(0,'+(fensterbreite-(schalterbreite*2))+','+vorschauhoehe+',0);">')
document.write('<div id="inhalt" style="position:relative;top:0;left:0;">')
document.write('<table><tr>')
for (i=0;i<=bilder.length-1;i++)
{
document.write('<td><a href="javascript:anzeigen('+i+')"><img src="'+bilder[i][0]+'" border="0"></a></td>')
}
document.write("</tr></table>")
document.write("</div></div>")
document.write('<div style="position:absolute;left:'+(fensterbreite-(schalterbreite))+';top:0;"><p><a href="javascript:void(0)" onmouseover="vor()" onmouseout="clearTimeout(timer)"> <img src="'+bildlaufvor.src+'" border="0"></a></p></div>')
}
</script>
<div id="anzeige" style="position:absolute;top:120;left:0;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td></td>
</tr>
</table>
</div>
</body>
</html>
Hat irgendwer ne Idee, wie ich den Scrollbalken wegkriege??
Währ euch sehr dankbar ;)
Gruß,
Robert