Gruppen

Top Gruppen: Windows 7; Windows Vista; Windows XP; Textverarbeitung; Excel; DSL; Internet Browser; E-Mail/Outlook
Betriebsysteme: Windows classik; Linux; BS-Sonstige
Software: Datenbanken; Bildbearbeitung; Audio/mp3/Video; Security/Viren; SW-Sonstige
Hardware: Mainboard/CPU; Grafikkarten; Peripherie; Laptop/Notebook; HW-Sonstiges
Netzwerk: Telefon,ISDN,Modem; W-Lan; NW-Sonstiges
Programmierung: PHP,ASP,Perl...; Java,C++...; Webseiten/HTML
Sonstiges: PC-Sonstiges; Plauderecke; SN Intern; Test

/ Forum / Skripte(PHP,ASP,Perl...)

Skripte(PHP,ASP,Perl...)

Fragevon sMoKe1983 vom 04.03.2022, 00:17 Options

Weicher Bildwechsel mit JavaScript

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?

Antwort schreiben

Antwort 1 von Como vom 04.03.2022, 13:00 Options

Hi, solche Scripte gibt es im Internet schon fertig.

Antwort 2 von Como vom 04.03.2022, 16:49 OptionsLösung

Nachtrag:
http://www.ajaxschmiede.de/demos/slideshow/
http://die.netzspielwiese.de/blog/javascript-dom/2006-06/dom-script...

Das sind nur 2, die ich auf die Schnelle gefunden habe.

Antwort 3 von sMoKe1983 vom 04.03.2022, 18:00 Options

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:

http://kleesit.de/zahnarzt/

Im Firefox, Safari und im SeaMonkey klappt alles wunderbar... hm...

Antwort 4 von supporter2010 vom 04.03.2022, 19:21 Options

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

Antwort 5 von supporter2010 vom 05.03.2022, 04:15 Options

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...

Antwort 6 von sMoKe1983 vom 05.03.2022, 12:34 Options

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.

Antwort 7 von gast42 vom 05.03.2022, 17:13 Options

dann pack eben alles in ein Bild! In DSL-Zeiten ist das durchaus möglich!

Mich würde das Geflimmer übrigens sehr stören!

Antwort 8 von Como vom 15.03.2022, 10:30 Options

Vielleicht hilft dir dieser Beitrag weiter: http://www.grammiweb.de/javascript/java370.shtml

Antwort 9 von son_quatsch vom 15.03.2022, 10:49 Options

Zitat:
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...

Antwort 10 von Como vom 15.03.2022, 14:32 Options

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

Antwort 11 von son_quatsch vom 15.03.2022, 15:12 Options

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...

Antwort 12 von gast42 vom 15.03.2022, 18:46 Options

Zitat:
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!

Antwort 13 von sMoKe1983 vom 16.03.2022, 11:41 Options

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: http://kleesit.de/zahnarzt/

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

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

Hinweis

Diese Frage ist schon etwas älter, Sie können daher nicht mehr auf sie antworten. Sollte Ihre Frage noch nicht gelöst sein, stellen Sie einfach eine neue Frage im Forum..