Ich will ein Bild alle x minuten ersetzen lassen durch ein zufälliges anderes.
Zurzeit ruf ich das ganze zum testen noch per linkKlick auf statt mit interval ect.
Aber leider faded das nicht so wie ich möchte.
Das script ruft eine php datei auf, welche als antwort den Link zu einem zufälligen Bild schickt. (das klappt) dann soll das Bild schonmal vorgeladen werden, damit es dann sofort vorhanden ist. (hier hab ich ein kleines script im netz gefunden)
Sobald das fertig ist, soll das alte bild weggefaded, und das neue reingefaded werden.
Und hier hängts. Statt zu faden, wird das Bild einfach ersetzt.
Hier mal mein Script:
Das bild ist auf der seite so definiert:
Und aufgerufen wird das ganze damit
Wie bekomm ich jetzt einen schönen fade effekt hin? Ich versuche ja das opacity runter- & raufzuscalieren, aber anscheinend klappt das nicht.
Zurzeit ruf ich das ganze zum testen noch per linkKlick auf statt mit interval ect.
Aber leider faded das nicht so wie ich möchte.
Das script ruft eine php datei auf, welche als antwort den Link zu einem zufälligen Bild schickt. (das klappt) dann soll das Bild schonmal vorgeladen werden, damit es dann sofort vorhanden ist. (hier hab ich ein kleines script im netz gefunden)
Sobald das fertig ist, soll das alte bild weggefaded, und das neue reingefaded werden.
Und hier hängts. Statt zu faden, wird das Bild einfach ersetzt.
Hier mal mein Script:
Code:
<script type="text/javascript"> var xmlhttp; var load_img; var timerid; function preloadImg() { if(xmlhttp.readyState == 4 && xmlhttp.status == 200) { imgpath = xmlhttp.responseText; load_img = new Image(); load_img.src = imgpath; timerid = setInterval("replace_img()", 2000); } } function replace_img(){ if (load_img.complete) { clearInterval(timerid); delete(timerid); img_fadeout(load_img.src); } } function img_fadeout(img) { for(var x=9; x>=0; x--){ document.getElementById("gallery_rotate").style.filter = "alpha(opacity=" + x + "0)"; document.getElementById("gallery_rotate").style.MozOpacity = "0." + x; } img_fadein(img); } function img_fadein(img) { document.getElementById("gallery_rotate").src = img; for(var x=0; x<=10; x++){ if(x != 10) { document.getElementById("gallery_rotate").style.filter = "alpha(opacity=" + x + "0)"; document.getElementById("gallery_rotate").style.MozOpacity = "0." + x; } else { document.getElementById("gallery_rotate").style.filter = "alpha(opacity=100)"; document.getElementById("gallery_rotate").style.MozOpacity = "1.0"; } } } function getRandImg() { var nocache = Math.random(); xmlhttp = new XMLHttpRequest(); xmlhttp.open("GET", '/0.2/randpicture.php?para=' + nocache, true); xmlhttp.onreadystatechange = preloadImg; xmlhttp.send(null); } </script>
Code:
<div id="img_rot"> <img id="gallery_rotate" height="163" width="154" src="img/1.jpg" style="filter:alpha(opacity=80);-moz-opacity:0.8"/> </div>
Code:
<a href="javascript:getRandImg();">test</a>
Kommentar