nicht angemeldet
Fade
Hallo,
ich habe ein Bild bei dem ich die Deckraft ändere. Nachdem sich die Deckraft geändert hat soll über dem Bild eine Fläche und Text erscheinen. Am schönsten wäre es, wenn es langsam erscheinen würde. Die Fläche und der Text befinden sich in div-Container.
Kann mir jemand sagen wie ich abfragen kann wann das faden vom abgechlossen ist und wie ich die Fläche und den Text faden kann?
Hier das Script zum faden des Bildes:
load_img = new Image();
load_img.src = '../images/screens/pc_welt.jpg';
function replace_img(){
if (load_img.complete) {
document['target_img'].src=load_img.src;
clearInterval(timerid);
window.setTimeout("fadeIn(document.getElementById('0'), 20, 0.2)", 2000);
}
}
timerid = setInterval("replace_img()", 200);
Ich sage schonmal Danke
-
Hi,
Tipp von mir: beschäftige dich mal mit dojo.
http://www.dojotoolkit.org/
Beispiele findest du hier:
http://dojocampus.org/explorer/#Dojo_FX_Fade--
Selfcode: ie:{ fl:( br:> va:| ls:& fo:| rl:? n4:& ss:| de:/ js:} mo:) zu:}-
Entschuldigung das ich die Funktion vergessen habe.
/*----------------------[Options]----------------------*/
speed=50; // wert in Millisekunden
stepIE=10; // differenz von Schritt zu Schritt [IE]
stepNS=0.1; // differenz von Schritt zu Schritt [NS]
// wert zwischen 0.9 und 0.1
/*---------------------[/Options]---------------------*/fadeObjects = new Array();
fadeInTimers = new Array();
fadeOutTimers = new Array();
function fadeIn(object,filterMS,optionsNS){
fadeObjects[object.id] = object;
if(fadeOutTimers[object.id]!=undefined){
window.clearTimeout(fadeOutTimers[object.id]);
}
if(object.style.MozOpacity){
if(object.style.MozOpacity>optionsNS){
object.style.MozOpacity-=stepNS;
fadeInTimers[object.id] = window.setTimeout("fadeIn(fadeObjects["+object.id+"], "+filterMS+", "+optionsNS+")", speed);
}else{
window.clearTimeout(fadeInTimers[object.id]);
}
}else{
if(object.filters.alpha.opacity>filterMS){
object.filters.alpha.opacity-=stepIE;
fadeInTimers[object.id] = window.setTimeout("fadeIn(fadeObjects["+object.id+"], "+filterMS+", "+optionsNS+")", speed);
}else{
window.clearTimeout(fadeInTimers[object.id]);
}
}
} -
Hi,
Bei dojo gibt es nur ein kleines Problem:
- du brauchst einen (lokalen) Server
- und die dojo bibliothek // die es frei zu downloaden gibtfalls du doch interesse an Dojo hast:
<html>
<head>
<script type="text/javascript" src="js/dojo-release-1.1.1/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojox.fx.ext-dojo.NodeList");
</script>
</head>
<body>
<img id="pic" src="...">
<script type="text/javascript">
dojo.fadeOut({
node: "pic",
duration: 1
}).play();
dojo.fadeIn({
node: "pic",
duration: 5000
}).play();
</script>
</body>
</html>--
Selfcode: ie:{ fl:( br:> va:| ls:& fo:| rl:? n4:& ss:| de:/ js:} mo:) zu:}-
Danke.
Ich habe es mir schon angesehen. Aber irgendwie funktioniert es bei mir nicht.
Ich habe jetzt mal dein Beispiel ausprobiert und es geht auch nicht. Wenn ich mir das Beispile auf der Dojo Campus Seite anschaue funktioniert es. nur lokal bei mir nicht.
Muß ich etwas am Server einstellen? Ich sitze am Mac und es läuft XAMPP.
Gruß
Carsten-
Hi,
<script type="text/javascript" src="js/dojo-release-1.1.1/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
Hier musst du die dojo.js einbinden.
das ist die Initialisierung von dojo, die du natürlich je nach datei pfad anpassen musst sprich:bei localhost/js/dojo-release-1.1.1/dojo/dojo.js muss es
src="js/dojo-release-1.1.1/dojo/dojo.js"
heißen.Danach wird die jeweils zu benutzende Bibliothek geladen, in diesem fall:
<script type="text/javascript">
dojo.require("dojox.fx.ext-dojo.NodeList");
</script>Hast du dich daran gehalten ?
--
Selfcode: ie:{ fl:( br:> va:| ls:& fo:| rl:? n4:& ss:| de:/ js:} mo:) zu:}-
Also bei mir sieht das script jetzt so aus:
<html>
<head>
<script type="text/javascript" src="script/dojo_1_1_1/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojox.fx.ext-dojo.NodeList");
</script>
</head>
<body>
<img id="pic" src="images/pc_welt.jpg">
<script type="text/javascript">
dojo.fadeOut({
node: "pic",
duration: 1
}
).play();
dojo.fadeIn({
node: "pic",
duration: 5000
}).play();
</script>
</body>
</html>Und es geht nicht.
-
Hi,
Ich hab den Fehler es muss als Funktion ausgeführt werden:
<html>
<head>
<script type="text/javascript" src="js/dojo-release-1.1.1/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojox.fx.ext-dojo.NodeList");
</script>
<script type="text/javascript">
function fade()
{
dojo.fadeOut({
node: "pic",
duration: 1
}).play();
dojo.fadeIn({
node: "pic",
duration: 5000
}).play();
}
</script>
</head>
<body onload="fade();"> <!-- Kann natürlich auch einen anderen Aufruf haben -->
<img id="pic" src="test.png"></body>
</html>weil der Dojo-Javascript wie jede serverbasierende Scriptsprache vor dem Html aufgerufen wird und somit das Bild noch gar nicht existiert.
mfg Robert
--
Selfcode: ie:{ fl:( br:> va:| ls:& fo:| rl:? n4:& ss:| de:/ js:} mo:) zu:}-
Hi,
vielen Dank für deine Mühe aber ich gebe es jetzt auf.
Es funktioniert immer noch nicht. Ich habe es jetzt auch auf einem Windows Rechner probiert und es passiert nichts.
Trotzdem Danke
-
-
-
-
-
-
-
Hi,
Hier das Script zum faden des Bildes:
kaum. Höchstens ein codeschnipsel, dass per intervall gerufen wird, eine image-source ändert und wieder einen timeout anstösst - die funktion "fadeIn" enthältst Du uns vor. Ausserdem kann das nicht sein:
document.getElementById('0'), denn 0 darf keine id sein.Da Deine Javascripterfahrungen offenbar gering sind, empfehle ich Dir, eine libary wie prototype oder jquery zu verwenden, die bieten (wenn Du die entsprechenden Effekte-Plugins hinzufügst) solche vorgefertigten Effekte. Über callback-Funktionen kannst Du dann weitere Aktionen starten, wenn der Vorgang abgeschlossen ist.
Gruesse, Joachim
--
Am Ende wird alles gut.