filters.blendTrans

H

HardcoreVibes

Mitglied
Ich habe folgenden Quelltext (selfhtml - abgeändert)

Code: 
<html><head><title>Test</title>
<script language="JScript" type="text/jscript">
Bild1 = new Image();
Bild1.src = "madrid1.jpg";
Bild2 = new Image();
Bild2.src = "madrid2.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>
</head><body>
<img id="Madrid" src="madrid1.jpg" style="cursor:hand; filter:blendTrans(Duration=1, Transition=16)" onMouseOver="Bildwechsel()" onMouseOut="Bildwechsel()" border="0" alt="Das ist Madrid">
</body>
</html>

Die ganze Sache funktioniert auch einwandfrei...! Nur: Ich möchte mir eine Site bauen, wo mehrere solcher bilder untereinander zu finden sind... also verschiedene Bilder, die mit dem gleichen script angesprochen werden und auch ein anderes "Überblendbild" haben... ich hab sowas früher schon mal gebastelt... aus genau dem gleichen Script, nur ich komm einfach nicht mehr dahinter, wie das ganze umgeschrieben werden musste... Eines weiß ich noch: Das Script musste um einige Zeilen erweitert werden... *g*

Ich danke im Voraus für eure Hilfe

C YA!
 
Im Groben gesagt solltest du dem Skript die jeweiligen Image()-Objekte als Parameter beim Funktionsaufruf übergeben... dann kannst du die Funktion sooft verwenden, wie du willst.
 
poste mal den Code... hab schon so viele Varianten versucht, die mir eingefallen sind...

Die Möglichkeit, die mir am logischten erscheint ist folgende:

Code: 
<html><head><title>Test</title>
<script language="JScript" type="text/jscript">
Bild1 = new Image();
Bild1.src = "home1.gif";
Bild2 = new Image();
Bild2.src = "home2.gif";
Bild3 = new Image();
Bild3.src = "about1.gif";
Bild4 = new Image();
Bild4.src = "about2.gif";
var Bild = 1;
function Bildwechsel () {
  if (Bild == 1) {
    Bild = 2;
    document.all.home.filters.blendTrans.Apply();
    document.all.about.filters.blendTrans.Apply();
    document.all.home.src = Bild2.src;
    document.all.about.src = Bild4.src;
    document.all.home.filters.blendTrans.Play();
    document.all.about.filters.blendTrans.Play();
  } else {
    Bild = 1;
    document.all.home.filters.blendTrans.Apply();
    document.all.about.filters.blendTrans.Apply();
    document.all.home.src = Bild1.src;
    document.all.about.src = Bild3.src;
    document.all.home.filters.blendTrans.Play();
    document.all.about.filters.blendTrans.Play();
  }
}
</script>
</head><body>
<img id="home" src="home1.gif" style="filter:blendTrans(Duration=.2, Transition=16)" onMouseOver="Bildwechsel()" onMouseOut="Bildwechsel()" border="0" alt="Das ist Madrid">
<img id="about" src="about1.gif" style="filter:blendTrans(Duration=.2, Transition=16)" onMouseOver="Bildwechsel()" onMouseOut="Bildwechsel()" border="0" alt="Das ist Madrid">

</body>
</html>

Wenn ich dann auf eines der Bilder zeige, gehen beide gleichzeitig... sollen sie aber nich!
 
Zuletzt bearbeitet:
z.B. so(habs nen bisschen eingekürzt, muss man weniger schreiben ;)):
Code: 
<script type="text/jscript">

arrImgs=['about','home'];


arrImg=[];

//Vorladen der Bilder und speichern der erzeugten Objekte in Array "arrImg"
for(i=0;i<arrImgs.length;++i)
    {
        arrImg[arrImgs[i]]=new Array()
        arrImg[arrImgs[i]][0]=new Image();arrImg[arrImgs[i]][0].src=arrImgs[i]+'1.gif';
        arrImg[arrImgs[i]][1]=new Image();arrImg[arrImgs[i]][1].src=arrImgs[i]+'2.gif';
    }



function Bildwechsel() 
{
    for(i=0;i<Bildwechsel.arguments.length;++i)
        {
            objImg=document.all[Bildwechsel.arguments[i]];
            objImg.filters.blendTrans.Apply();
            objImg.src = (objImg.src==arrImg[Bildwechsel.arguments[i]][0].src)
                            ? arrImg[Bildwechsel.arguments[i]][1].src
                            : arrImg[Bildwechsel.arguments[i]][0].src;
            objImg.filters.blendTrans.Play();
        }
}
</script>

Wichtig:
der Aufbau der <img>-Tags muss so bleiben, wie du ihn schon hast.
Soll bedeuten: Die ID des Bildes ist identisch mit dem Dateinamen(mal von der 1 abgesehen)

also immer nach dem Schema:
Code: 
<img id="blubb" src="blubb1.gif">
das Alternativbild dann "blubb2.gif" ....also genauso, wie es schon ist.

Der Aufruf geht wie folgt:
Code: 
onMouseOver="Bildwechsel('home','about')"
...also jeweils die ID's der zu ändernden Bilder in Anführungszeichen, durch Kommas getrennt.
(bei onMouseOut dasselbe)

Wieviele Bilder du da angibst, ist dir überlassen.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück