Beispiel aus Computerbild 19/2003
Zeromancer
- javascript
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----------------------
guten abend,
hm, bisel viel Zeugs auf einmal. Das Wichtigste dürfte sein:
Wenn du hier:
function ini(lauf, richt)
zwei Parameter "lauf" und "richt" vorgibst, so müssen sie auch hier:
<body onload="ini()">
im Funktiosaufruf notiert werden. Das hätte dir übrigens der IE auch sagen können, der meldet nämlich was von "Objekt erwartet".
Grüße aus Berlin
Christoph S.
Hallo
hm, bisel viel Zeugs auf einmal. Das Wichtigste dürfte sein:
Wenn du hier:
function ini(lauf, richt)
zwei Parameter "lauf" und "richt" vorgibst, so müssen sie auch hier:
<body onload="ini()">
im Funktiosaufruf notiert werden. Das hätte dir übrigens der IE auch sagen können, der meldet nämlich was von "Objekt erwartet".
<schmunzel>Hat er auch, aber wenn ich es doch Wort für Wort abtippe, hoffe ich doch auf die Kompetenz der Redakteure</schmunzel>
Schon mal vielen Dank.
MfG
André
argh,
<schmunzel>aber wenn ich es doch Wort für Wort abtippe, hoffe ich doch auf die Kompetenz der Redakteure</schmunzel>
Kompetenz bei Computerbild? Wie kannst du auf so eine verquere Idee kommen?
Im übrigen sehe ich nicht, weshalb du dir derart viele Umstände machen mußt. Auch wenn du den Filter haben möchtest, solltest du mit einigen Variablen und zwei Dutzend Zeilen weniger auskommen können.
Grüße aus Berlin
Christoph S.
Hallo
Im übrigen sehe ich nicht, weshalb du dir derart viele Umstände machen mußt. Auch wenn du den Filter haben möchtest, solltest du mit einigen Variablen und zwei Dutzend Zeilen weniger auskommen können.
Ich bastle grad an einer Offline-HP für 'ne CD. Übrige Skripte habe ich auch nur aus entsprechenden Archiven. Mir fehlt zur zeit die Zeit um mich intensiv mit JS zu beschäftigen. HTML habe ich aber schon drauf. Wie auch immer, suche ein vernünftiges Skript, mit dem man Dia-Shows machen kann. Ein bisschen Effekthascherei ist natürlich auch immer dabei.
André
Hallo André,
Wie auch immer, suche ein vernünftiges Skript, mit dem man Dia-Shows machen kann. Ein bisschen Effekthascherei ist natürlich auch immer dabei.
Vielleicht gefällt dir das Beispiel aus der iX (siehe http://heise.de/ix/artikel/2003/09/112/ (unter "Ein abschließendes Beispiel"))?
Grüße aus Nürnberg
Tobias
Hallo
vielen Dank, ich werde mir das mal in Ruhe ansehen.
André