nicht angemeldet
Bildleiste scrollen - aber wie?
Guten Tag allerseits,
hoffe, daß ich hier die benötigte Hilfe finde. Ich selbst weiß nicht weiter.
Problem ist folgendes:
Es soll auf einer Site eine horizontal scrollbare Bilderleiste angezeigt werden. In dieser Bilderleiste sind mehrere Bilder zusammengefaßt, daher ist die Leiste oder Bilderreihe sehr lang.
Ich habe also eine Ebene angelegt, in der sich die Bilderreihe befindet. Diese Ebene liegt in einer anderen Ebene, die als Maske fungiert, sodaß man die Bilderreihe wie in einem Fenster scrollen kann.
Über dieser Ebene befindet sich eine dritte Ebene mit 5 Spacer-gifs. Die gifs sind mit mouseover-Effekten belegt. Wenn man also mit der Mouse über die Spacer-gifs fährt, kann man die Scrollgeschwindigkeit ändern.
Ich weiß nicht warum, aber während es im IE einigermaßen funktioniert, gehts im Netscape nicht. Zwar scrollt die Bilderreihe, aber erstens sehr zäh und zweitens stopt sie bei mouseout nicht und ändert auch nicht die scroll-Richtung.
Ich habe verschiedene frei erhältliche Scripte, die so einigermaßen passen könnten, ausprobiert, bin aber zu blöd, sie so umzuschreiben, daß sie für meinen Zweck brauchbar sind.
Hier ist mein Script, wie es nicht richtig funktioniert:
<script language="JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
// -->
</script>
<script language="javascript">
var verschieben=0;
var time;
function rechtslinks(zahl)
{
if(verschieben>0){
clearTimeout(time);
verschieben=0;
return;
}
if(verschieben<-2428){
clearTimeout(time);
verschieben=-2428;
return;
}
document.getElementById("Bildleiste").style.left=verschieben;
time=setTimeout("rechtslinks("+zahl+")",1);
verschieben=verschieben+zahl;
}
function stop(){
clearTimeout(time);
}
</script>
</head>
<body bgcolor="#000000" text="#000000">
<!--Beginn Masken- oder FensterEbene-->
<div id="Fenster" style="position:absolute; left:53px; top:256px; width:510px; height:191px; z-index:1; overflow: hidden">
<!--Beginn Ebene mit Bilderreihe-->
<div id="Bildleiste" style="position:absolute; left:-53px; top:11px; width:3001px; height:145px; z-index:2"><img src="Bilder/ReiheFoto.jpg" width="2928" height="170" name="Foto"></div>
</div>
<!--Beginn Ebene mit Spacerfifs-->
<div id="Spacerebene" style="position:absolute; left:59px; top:272px; width:500px; height:160px; z-index:3">
<table width="250" border="0" cellspacing="0" cellpadding="0" height="160">
<tr>
<td width="50"><a href="#" onMouseover="rechtslinks(2)" onMouseout="stop()"><img src="Bilder/spacer.gif" width="100" height="160" border="0"></a></td>
<td width="50"><a href="#" onMouseover="rechtslinks(1)" onMouseout="stop()"><img src="Bilder/spacer.gif" width="100" height="160" border="0"></a></td>
<td width="50"><a href="#" onMouseover="rechtslinks(0)" onMouseout="stop()"><img src="Bilder/spacer.gif" width="100" height="160" border="0"></a></td>
<td width="50"><a href="#" onMouseover="rechtslinks(-1)" onMouseout="stop()"><img src="Bilder/spacer.gif" width="100" height="160" border="0"></a></td>
<td width="50"><a href="#" onMouseover="rechtslinks(-2)" onMouseout="stop()"><img src="Bilder/spacer.gif" width="100" height="160" border="0"></a></td>
</tr>
</table>
</div>
Ist eine Browserabfrage nötig und wie müßte die aussehen?
Oder kennt jemand eine Seite, wo ich ein frei verfügbares Script für meinen Zweck bekommen kann?
Wäre schön, wenn mir jemand helfen könnte.
Danke
Gruß
Harald