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 son_quatsch Experte (5.3k Punkte)
Ach ja... nur Opera ist das Problem. Wiedermal alles begriffen.

Das zeigt vielmehr, dass das Skript mindestens für Opera nicht läuft. Das kann genauso Safari, Chrome oder sonstige Browser betreffen. Und überhaupt: wenn ein Skript versagt, dann liegt das in erster Linie an viel zu naivem Code - allein die Nutzung des DOMs ist fast schon eine Garantie für Browserunabhängigkeit - nur scheuen sich die meisten davor, weil es eben nicht mit zwei Zeilen zu bewältigen ist.

Wenn du mindestens 22 von 1000 Besucher von deiner Homepage vergraulen willst - nur zu. Mal abgesehen davon, worauf die Statistik fasst (Reloads?) und ob sie Crawler rausrechnet...
0 Punkte
Beantwortet von
Opera? Nach meiner Homepage-Statistik sind das gerade mal 2,2%.
du weißt, dass sich Opera voreinstellungsgemäß als Firefox oder IE tarnt (u.a. um schlechte JavaScript-Browserweichen auszuhebeln)?

Ansonsten kann ich son_quatsch nur zustimmen: der Code ist uralt! Vor allen Dingen ist er alles andere als unobstrusive. Im Zusammenspiel mit anderen Skripten können sich so herrliche Quereffekte einstellen. So hat man vor 10-15 Jahren programmiert, indessen haben aber Programmierer dazugelernt!
0 Punkte
Beantwortet von smoke1983 Einsteiger_in (59 Punkte)
Ich habe das Problem gelöst indem ich Kasten1 und Kasten3 als PNG gelassen habe und per z-index über Kasten2 gelegt habe. Die Bilder in Kasten2 habe ich als JPG angelegt. Sie laden dadurch schneller und da Kasten1 und Kasten3 über Kasten2 liegt, wird auch keine Transparenz benötigt.

Hier der Code:
<html>

<head>
<style type="text/css">
#kasten1 {
position: absolute;
top: 55px;
z-index: 2;
}

#kasten2 {
position: absolute;
height: 200px;
width: 446px;
left: 300px;
top: 0px;
z-index: 1;
}

#kasten2 img {
position: absolute;
display: none;
top:0; left:0;
}

#kasten2 img.start {
display: block;
}

#kasten3 {
position: absolute;
left: 665px;
top: 55px;
z-index: 3;
}
</style>
<title>Zahnarzt</title>
<script type="text/javascript" src="js/slideshow.js"></script>
</head>

<body>

<div id="kasten1"><img src="images/kasten1.png" /></div>
<div id="kasten2"><img class="start" src="images/kasten2-001.jpg" width="446" height="200" /></div>
<div id="kasten3"><img src="images/kasten3.png" /></div>

</body>

</html>
Und hier noch mal der Link: kleesit.de/zahnarzt/

Klappt übrigens wunderbar in allen Browser, auch im Opera.

Ich bedanke mich für eure Hilfe :) Der Thread kann geschlossen werden.
Seite:
...