Grafiken wechseln

[Thomas]

Hallo ich bin gerade am basteln und wollte per HTML auf meiner Startseite mehrere Grafiken ablegen. Hab da auch was hier dazu gefunden. Meine Frage: geht das nur mit max 2 Grafiken oder kann da noch mehr rein. Über eine Antwort wäre ich sehr dankbar.

hier mein Quelltext:
</script>
   <title>Meine RenderSite</title>

<script language="JScript" type="text/jscript">
  Bild1 = new Image();
  Bild1.src = "bilder/star.jpg";
  Bild2 = new Image();
  Bild2.src = "bilder/fire.jpg";
  Bild3 = new Image();
  Bild3.src = "bilder/winter.jpg";

var Bild = 1;
  function Bildwechsel () {
   if (Bild == 1) {
      Bild = 2;
      document.all.Madrid.filters.blendTrans.Apply();
      document.all.Madrid.src = Bild2.src;
      document.all.Madrid.filters.blendTrans.Play();
   } else {
      Bild = 1;
      document.all.Madrid.filters.blendTrans.Apply();
     document.all.Madrid.src = Bild1.src;
     document.all.Madrid.filters.blendTrans.Play();
   }
  }
</script>

bekomme das 3 Bild geschweige ein 4 oder 5 nicht mit rein ohne das mir die Überblendeffekte flöten gehen.

[Felix Riesterer]

Lieber Thomas,

bekomme das 3 Bild geschweige ein 4 oder 5 nicht mit rein ohne das mir die Überblendeffekte flöten gehen.

Tja, warum wohl nicht? Dein Bild Nr. 3 (4 und 5) benennst Du "Bild3" (und wahrscheinlich analog dazu "Bild4" und "Bild5"). Wo bitte in der Funktion "Bildwechsel()" steht denn etwas von diesen weiteren Variablen?

  

>   Bild1 = new Image();  
>   Bild1.src = "bilder/star.jpg";  
>   Bild2 = new Image();  
>   Bild2.src = "bilder/fire.jpg";  
>   Bild3 = new Image();  
>   Bild3.src = "bilder/winter.jpg";  
>   
>   var Bild = 1;  
>   function Bildwechsel () {  
>    if (Bild == 1) {  
>       Bild = 2;  
>       document.all.Madrid.filters.blendTrans.Apply();  
>       document.all.Madrid.src = Bild2.src;  
>       document.all.Madrid.filters.blendTrans.Play();  
>    } else {  
>       Bild = 1;  
>       document.all.Madrid.filters.blendTrans.Apply();  
>      document.all.Madrid.src = Bild1.src;  
>      document.all.Madrid.filters.blendTrans.Play();  
>    }  
>   }

Vielleicht solltest Du "Bildwechsel()" variabel gestalten, sodass Du "Bildwechsel()" das Bild, zu dem der Übergang verlaufen soll, jedesmal beim Aufruf übermittelst. Dazu würde es sich allerdings sehr empfehlen, wenn Du Deine Bilder dann in einem Array (oder von mir aus Objekt) sammelst, damit man bequemer auf sie zugreifen kann.
Zuguterletzt solltest Du diese uralte JScript-Syntax mit "document.all" komplett über Board werfen und die neuere DOM-Syntax für moderne Browser einsetzen. Dazu gehört dann auch <script type="text/javascript">!

  
 var meineBilder = new Array();  
  
 meineBilder[1] = new Image();  
 meineBilder[1].src = "bilder/star.jpg";  
 meineBilder[2] = new Image();  
 meineBilder[2].src = "bilder/fire.jpg";  
 meineBilder[3] = new Image();  
 meineBilder[3].src = "bilder/winter.jpg";  
 // weitere Bilder hier einfügen  
  
 function Bildwechsel(BildNr)  
 {  
 var MadridBild = document.getElementById("Madrid");  
 if(meineBilder[BildNr])  
  {  
  MadridBild.filters.blendTrans.Apply();  
  MadridBild.src = meineBilder[BildNr].src;  
  MadridBild.filters.blendTrans.Play();  
  }  
 }

Der Aufruf der Funktion "Bildwechsel()" muss dann einen numerischen Wert enthalten, der das entsprechende Array-Element referenziert. Das könnte so aussehen: <a href="bild.jpg" onclick="Bildwechsel(2)"><img src="bild" alt="Madrid-Bild" id="Madrid" /></a>

Ich habe meinen Kram da jetzt nicht getestet. Das kannst Du sicher selber!

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Vinzenz Mai]

Hallo Felix,

bekomme das 3 Bild geschweige ein 4 oder 5 nicht mit rein ohne das mir die Überblendeffekte flöten gehen.
Tja, warum wohl nicht? Dein Bild Nr. 3 (4 und 5) benennst Du "Bild3" (und wahrscheinlich analog dazu "Bild4" und "Bild5"). Wo bitte in der Funktion "Bildwechsel()" steht denn etwas von diesen weiteren Variablen?

wenn Du wissen willst, wo der Code herkommt, so schau doch bitte mal in SELFHTML nach. *bg*

Zuguterletzt solltest Du diese uralte JScript-Syntax mit "document.all" komplett über Board werfen und die neuere DOM-Syntax für moderne Browser einsetzen. Dazu gehört dann auch <script type="text/javascript">!

[code lang=javascript]
var MadridBild = document.getElementById("Madrid");

Das wird bei den meisten Browsern heutzutage klappen, ...

MadridBild.filters.blendTrans.Apply();

... das hier dagegen nur im IE (ab 4), ansonsten einen Fehler produzieren.
Wie war das mit dem Prüfen der Existenz der verwendeten Objekte, Methoden und Eigenschaften?

Auf jeden Fall ist es ein guter Vorschlag, Nicht-IE-Benutzer wie mich nicht auszugrenzen. Danke.

Freundliche Grüße

Vinzenz

[Felix Riesterer]

Lieber Vinzenz,

vielen Dank für die wichtige Anmerkung

MadridBild.filters.blendTrans.Apply();
... das hier dagegen nur im IE (ab 4)

Also ein Update:

if(meineBilder[BildNr])  
  {  
  if(MadridBild.filters) MadridBild.filters.blendTrans.Apply();  
  MadridBild.src = meineBilder[BildNr].src;  
  if(MadridBild.filters) MadridBild.filters.blendTrans.Play();  
  }

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[thomas]

--->
Bei deiner Umsetzung macht er ein neues Fenster auf das will ich ja nicht er soll auf der bestehenden Seite nur das bild tauschen.
Siehe http://de.selfhtml.org/dhtml/modelle/anzeige/madrid.htm

Ich wollte da nur mehr in die Wenn Funktion einbauen als 2 und das ist mir bis jetzt noch nicht gut gelungen. Ich hatte schon 4 drin aber er hat 1 dann nur kurz gezeigt und schon war er beim nächsten er ist dann gesprungen.
Grüße Thomas

[Felix Riesterer]

Liebe(r) thomas,

Bei deiner Umsetzung macht er ein neues Fenster auf das will ich ja nicht er soll auf der bestehenden Seite nur das bild tauschen.

OK. Meine Schlampigkeit. *gg*
<a href="bild.jpg" onclick="Bildwechsel(2); return false;">...

Andere Variante (aber bitte mit Update aus meiner Antwort auf Vinzenz' Posting!):

function Bildwechsel(BildNr)  
   {  
   ... blabla  
   return false; // das ist wichtig für den onclick-Aufruf!  
   }

Und im HTML-Teil dann <a href="bild.jpg" onclick="return Bildwechsel(2);">...

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Hopsel]

Hi Thomas!

Über eine Antwort wäre ich sehr dankbar.

Die hast du ja schon von Felix bekommen.

Von mir darfst du dir jetzt noch ein wenig Krikit anhören. ;-)
Ich finde solche Überblendeffekte nämlich eher störend als bereichernd. Vielleicht solltest du dir noch einmal überlegen, ob die der Einsatz von Javascript für so etwas nicht zu Schade ist.

MfG H☼psel