Blendeeffekt
0 0 0 0 
JürgenB
0
0 
Felix Riesterer
Blendeeffekt
Hallo liebes Forengemeinschaft,
ich stehe wieder auf dem Schlauch.
Ich habe ein Button, wenn ich auf diesen Button Drücke werden Bilder fortlaufen, nach dem "i++" Prinzip angezeigt. Dabei sollen die Bilder aber von
opacity="0"
bis
opacity="100"
eingeblendet werden. Für das erste Bild (wenn die Seite gestartet wird) klappt es auch, aber bei den anderen Bildern nicht mehr, woran könnte es liegen?
Hier mein Code:
<html>
<head>
<script language="javascript">
var transparenz=0;
function einblenden()
{
if(transparenz!=100)
{
image.style.filter="Alpha(opacity="+transparenz+", finishopacity=100)";
}
setTimeout('transparenz++;einblenden()',5);
}
function plus()
{
var f = document.getElementById("TextBox").value.substr(0,10);
f = parseInt(f);
s = f + 1;
var a = document.getElementById("TextBox");
a.value = s+".jpg";
document.getElementById("grafik").src = a.value;
}
</script>
</head>
<body onload="einblenden()">
<div id="image" style="width:250;filter:Alpha(opacity=100,finishopacity=0)">
<img id="grafik" src="1.jpg" width="250" height="250"/>
<input type="text" id="TextBox" name="TextBox" value="1.jpg"/>
<input type="button" value="KLICK" onclick="plus(); einblenden()" />
</div>
</body>
<html>
Vielen Dank und viele Grüße
PokerASS
-
Hi,
...
function plus()
{
var f = document.getElementById("TextBox").value.substr(0,10);
f = parseInt(f);
s = f + 1;
var a = document.getElementById("TextBox");
a.value = s+".jpg";
document.getElementById("grafik").src = a.value;transparenz=0;
}
</script>...
der schlüssel ist: transparenz=0; bei deinem skript zählt er ewig weiter und kommt nicht mehr zu 0 (was für einen neustart des effektes notwendig ist)
lg, david
-
Hallo,
nochmal vielen Dank für die schnelle und sehr hilfreiche Antwort, undzwar habe ich noch eine kleine Sorge,
was mache mache ich an diesem Code flasch? Es die Funktion einblenden wird beim starten mit gestartet, dabei wird die funktion plus alle 8 sekunden gestartet werden, wobei bei der funktion plus die bilder jede sekunde gewechselt werden:
<html> <head> <script language="javascript"> var transparenz=0; function einblenden() { if(transparenz!=100) { bild.style.filter="Alpha(opacity="+transparenz+", finishopacity=100)"; } window.setTimeout('transparenz++;einblenden()',10); window.setInterval("plus()", 8000); } function plus() { var f = document.getElementById("TextBox").value.substr(0,10); f = parseInt(f); s = f + 1; var a = document.getElementById("TextBox"); a.value = s+".jpg"; document.getElementById("grafik").src = a.value; transparenz=0; if (s==1) { window.setInterval("plus()", 1000); } else if (s==9) { a.value = "1.jpg"; document.getElementById("grafik").src = a.value; } } </script> </head> <body onload="einblenden()"> <div id="bild" style="width:560;filter:Alpha(opacity=100,finishopacity=0)"> <img id="grafik" src="1.jpg" width="560" height="560"/> <input type="text" id="TextBox" name="TextBox" value="1.jpg"/> <input type="button" value="KLICK" /> </div> </body> <html>Viele Grüße
PokerASS-
was mache mache ich an diesem Code flasch?
nach wieviel Flasch hast du denn diesen Text codiert?
Es die Funktion einblenden wird beim starten mit gestartet, dabei wird die funktion plus alle 8 sekunden gestartet werden, wobei bei der funktion plus die bilder jede sekunde gewechselt werden:
Häää ?
-
Hallo PokerASS,
var transparenz=0;
function einblenden()
{
if(transparenz!=100)
{
bild.style.filter="Alpha(opacity="+transparenz+", finishopacity=100)";
}
window.setTimeout('transparenz++;einblenden()',10);
window.setInterval("plus()", 8000);
}diese Funktion startet sich alle 10 ms neu, also 100 Mal in der Sekunde. U.A startet sie jedesmal ein 8-Sekunden Intervall. Damit machst du jeden Rechner platt, schon weil "plus()" sich auch jede Sekunde neu startet. Gruß, Jürgen -
Hi,
> <html> > <head> > <script language="javascript"> ~~~~~~javascript > var transparenz=0; var isschon="nein"; > function einblenden() > { > if(transparenz!=100) > { > bild.style.filter="Alpha(opacity="+transparenz+", finishopacity=100)"; > } > window.setTimeout('transparenz++;einblenden()',10); if(isschon!="ja") window.setInterval("plus()", 8000); isschon="ja"; } > } ...lg, davidp
-
Lieber davidp,
Du hast dem OP verschwiegen, dass sein Script (wenn überhaupt) nur im IE den gewünschten Effekt haben wird. Das ist vielleicht aber nicht so gewollt. Daher wäre der Hinweis auf "...style.filter = nur für IEs" angebracht gewesen.
Andere Browser kennen keine filter-Eigenschaft und quittieren das Script mit einer Fehlermeldung.
Nicht immer ist die anscheinend einfachste Lösung auch die sinnvollste!
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Hi,
Lieber davidp,
Du hast dem OP verschwiegen, dass sein Script (wenn überhaupt) nur im IE den gewünschten Effekt haben wird. Das ist vielleicht aber nicht so gewollt. Daher wäre der Hinweis auf "...style.filter = nur für IEs" angebracht gewesen.
Andere Browser kennen keine filter-Eigenschaft und quittieren das Script mit einer Fehlermeldung.
Nicht immer ist die anscheinend einfachste Lösung auch die sinnvollste!
Liebe Grüße,
Felix Riesterer.
darauf bin ich auch schon gekommen (ich verwende nämlich FF) aber wenn man etwas programmiert, testet man es zuerst, und kommt dann mit einem fehler hierher. also muss bei ihm funktioniert haben.
lg, davidp
-
-
Hallo davidp,
ich glaub ich muss die ASSE unter meinem Ärmel Dir weitergeben.... :-)
Ist schon irre wo ich gehackt habe und die Lösung so simple war. Bin gar nicht darauf gekommen.Vielen Dank für Deine freundliche Unterstüzung.
Viele Grüße
PokerASS-
Hi,
Hallo davidp,
ich glaub ich muss die ASSE unter meinem Ärmel Dir weitergeben.... :-)
Ist schon irre wo ich gehackt habe und die Lösung so simple war. Bin gar nicht darauf gekommen.Vielen Dank für Deine freundliche Unterstüzung.
Viele Grüße
PokerASSstudieren geht über probieren^^
-
-
-
-
-
Liebes PokerASS,
vielleicht hilft Dir dieser Artikel weiter, um Dein Script flexibler und seine Anwendung einfacher zu machen? [Fader-Framework]
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)