Frage stellen

Weicher Bildwechsel mit JavaScript

13.6k Aufrufe
Gefragt in Skripte(PHP,ASP,Perl...) von smoke1983 Einsteiger_in (59 Punkte)
Ich bin leider nicht so der JavaScript Profi. Aber ich weiß das man mit den jQuery-Effekten (in meinem Fall "opacity") wunderbar einen weichen Bildwechsel realiseren kann. Nur leider weiß ich nicht genau wie. Bis jetzt sieht mein Code so aus (wodurch die Bilder wechseln aber nicht weich überblenden):

<html>
<head>
<script language="JavaScript">
<!--

verzoegerung = 1200;
bildNummer = 1;

bilder= new Array();

for (i = 1; i <= 2; i++) {
bilder[i] = new Image();
bilder[i].src = "images/kasten2_" + i + ".png";.
}

function naechstesBild() {
document.animation.src = bilder[bildNummer].src;

bildNummer++;
if (bildNummer > 2) bildNummer = 1;
}

// -->
</script>
</head>
<body>
<img src="images/kasten2_1.png" name="animation" onLoad="setTimeout('naechstesBild()', verzoegerung)">
</body>
</html>


Was muss ich jetzt ändern damit die Bilder weich überblenden? Ich weiß das der Befehlt dafür lautet:
$(this).animate ({ opacity: "0" }, 1000);
aber nicht genau wo er rein muss. Kann mir jemand helfen?

13 Antworten

0 Punkte
Beantwortet von
Hi, solche Scripte gibt es im Internet schon fertig.
0 Punkte
Beantwortet von
0 Punkte
Beantwortet von smoke1983 Einsteiger_in (59 Punkte)
Vielen dank für die Links. Den ersten hatte ich auch gefunden, aber der den zweiten kannte ich jetzt noch nicht. Welcher mir dann auch weiter geholfen hat. Nur leider sieht man im IE bei meinen Grafiken links und rechts so blöde striche:

kleesit.de/zahnarzt/

Im Firefox, Safari und im SeaMonkey klappt alles wunderbar... hm...
0 Punkte
Beantwortet von Experte (6.4k Punkte)
Hallo,

Du musst für Deine Bilder die Breite und Höhe mit angeben, dann klappts auch im IE...

Und wenn Du Deine Bilder nach gif oder jpeg konvertierst, dann werden sie auch schön klein...

mfg, sup2010
0 Punkte
Beantwortet von Experte (6.4k Punkte)
Mir ist gerade klar geworden, warum die Bilder als png gespeichert sind... habe da vorher nicht drüber nachgedacht...

Aber Du kannst die Bilder in Deinem Grafikprogramm ja auch so anordnen wie sie jetzt auf der Website zu sehen sind und dann in drei Teile zerlegen, dann muss nichts überlappen...oder gar nicht zerlegen und komplett als jpeg speichern. Oder einfach so lassen...
0 Punkte
Beantwortet von smoke1983 Einsteiger_in (59 Punkte)
Ich danke dir für deine Tipps.
Ich habe jetzt die Höhe und die Breite im <img> Tag angegeben und in CSS unter #kasten2 definiert. Trotzdem macht der IE den gleichen Fehler immer noch. Wenn ich die drei Kasten nebeneinander als JPG abspeichere und dann überblenden lasse, wird der blaue Kasten beim überblenden kurz etwas heller :( Deswegen klappt das auch nicht mit dem zerlegen.
0 Punkte
Beantwortet von
dann pack eben alles in ein Bild! In DSL-Zeiten ist das durchaus möglich!

Mich würde das Geflimmer übrigens sehr stören!
0 Punkte
Beantwortet von
Vielleicht hilft dir dieser Beitrag weiter: http://www.grammiweb.de/javascript/java370.shtml
0 Punkte
Beantwortet von son_quatsch Experte (5.3k Punkte)
Vielleicht hilft dir dieser Beitrag weiter
Nein, jedenfalls möchte ich davon abraten, da es unter Opera 10.10 nicht die Bohne läuft. Ist auch reichlich suspekt, wenn ich darin noch Layer entdecke...
0 Punkte
Beantwortet von
Wer verwendet schon Opera? Nach meiner Homepage-Statistik sind das gerade mal 2,2%.
Übrigens hier die Originaleseite für das Script: http://www.dynamicdrive.com/dynamicindex14/translucentslide.htm
Seite:
...