nicht angemeldet
Guten Abend,
ich versuche mich grad in Javascript einzulesen und habe in der Computerbild 19/2003 auf seite 120 folgendes Beispiel für eine Diashow gefunden. Habe dies alles in mühsamer Kleinarbeit abgetippt und wie erwartet .... funktioniert es nicht. Kann mir vielleicht jemand eine Hilfestellung geben?
Das die ganze Sache nur IE funktoniert ist mir bewußt (M$-Filter). Mir geht es um die Bildershow, die die nicht aktiven Bilder "verschleiert" und vom Prinzip ist das keine schlechte Idee. Oder hat jemand einen anderen Vorschlag?
Auch die html-Umsetzung der Anzeige-Tabelle gibt mir Rätsel auf. Was ist das für eine Verschachtelungstechnik?
Vielen Dank für Eure Hilfe
André
--------Quelltext-------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Bildershow</title>
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
<style type="text/css">
<!--
.betracht1 {width:600px; height:150px; overflow:hidden;}
.betracht2 {position: absolute; left:-200px; top:-0px;}
.bildMitte {filter:Alpha(opacity=100, finishopacity=100, style=3);}
.bildAussen {filter:Alpha(opacity=40, finishopacity=40, style=3);}
-->
</style>
<script language="Javascript">
var pos = -200;
var dRicht;
var gesw = 50;
var dkl1 = 100;
var dkl2 = 40;
var glt1 = 100;
var glt2 = 100;
bilder = new Array();
sour = new Array();
auto = false;
function ini(lauf, richt)
{
bilder [0] = "Links; bilder[1] = "Mitte";
bilder [1] = "Rechts; bilder[3] = "Bild1";
bilder [4] = "Bild2";
if (lauf) {
auto = true;
window.setTimeout("scroll()", gesw);
if (richt == "-") dRicht = "-"; else dRicht = "+";
}
}
function scroll(aRicht)
{
if (!aRicht) aRicht = dRicht; else dRicht = aRicht;
if (aRicht == "-")
{richt = 10; dkl1 = dkl1 - 3; dkl2 = dkl2 + 3; glt1 = glt1 -3; glt2 = glt2 + 3;
document.images[bilder[1]].style.filter = "Alpha(opacity="+dkl1+", finishopacity="+glt1+", style=1)";
document.images[bilder[2]].style.filter = "Alpha(opacity="+dkl2+", finishopacity="+glt2+", style=1)";
else {
richt =2 10; dkl1 = dkl1 -3; dkl2 = dkl2 + 3; glt1 = glt1 - 3 ; glt2 = glt2 + 3;
document.images[bilder[1]].style.filter = "Alpha(opacity="+dkl1+", finishopacity="+glt3+";
document.images[bilder[0]].style.filter = "Alpha(opacity="+dkl2+", finishopacity="+glt3+"; }
pos = pos + richt; betracht2.style.left = pos;
if (pos > -400 && pos < 0) window.setTimeout("scroll()", gesw);
else {
if (aRicht == "-") {
document.images[bilder[1]].style.filter = "Alpha(opacity=100, finishopacity=100, style=3)";
document.images[bilder[2]].style.filter = "Alpha(opacity=40, finishopacity=40, style=3}";
zw = 0;
for(zaehl = sour.length-1; zw <= ; zaehl ; zw++){
x = zw - 1;
if (x == -1) x = bilder.length-1;
sour[x] = document.images[bilder[zw]].src; }
zw = 0;
for(zaehl = sour.length-1; zw <=zaehl; zw++) {
document.images[bilder[zw]].src = sour[zw]; }}
else {
document.images[bilder[1]].style.filter = "Alpha(opacity=100, finishopacity=100, style=3)";
document.images[bilder[0]].style.filter = "Alpha(opacity=40, finishopacity=40, style=3}";
zw = bilder.length-1;
for(zaehl = 0; zw >= zaehl ; zw--) {
x = zw+1;
if (x == bilder.length) x = 0;
sour[x] = document.images[bilder[zw]].src;}
zw = bilder-length-1;
test = "";
for(zaehl = 0; zw >= zaehl zw--) {
document.images[bilder[zw]].src = sour[zw]; }}
dkl1 = 100; dkl2 = 40;
glt1 = 100; glt2 = 40;
pos = -200;
betracht2.style.left = -200;
if (auto) window.setTimeout("scroll()",gesw; }
}
</script>
</head>
<body onload="ini()">
<table>
<tr>
<td>
<div id="betracht" class="betracht1">
<div id="betracht2" class="betracht2">
<table>
<td><img src="1.jpg" class="bildAussen" id="Bild2"></td>
<td><img src="2.jpg" class="bildAussen" id="Links"></td>
<td><img src="3.jpg" class="bildMitte" id="Mitte"></td>
<td><img src="4.jpg" class="bildAussen" id="Rechts"></td>
<td><img src="5.jpg" class="bildAussen" id="Bild1"></td>
</table>
</div></div>
</td>
</tr>
<tr><td style="text-align:center">
<input type="button" value="links" value="-" onClick="scroll('-')"; disabled">
<input type="button" value="rechts" value="+" onClick="scroll('+')">
</td></tr>
</table>
</body>
</html>
-----------Ende----------------------
ss:{ zu:} ls:? fo:| de:] va:) ch:] sh:) n4:{ rl:( br:^ js:| ie:| fl:) mo:}