Fließende Übergänge mit dem blendTrans-Filter
joker
- dhtml
Bitte, wer kann helfen?
zu finden unter tfbc.htm
folgendes:
ich wills bei mehreren bildern im selben frame benutzen nur ich schaffs nicht das es genau das tut.
mittlerweile bin ich hier angelangt, jetzt werden beide bilder "ueberblendet" und wieder eingeblendet. aber nur ein mal.
Ich moechte aber ein jedes bild einzeln ueber- einblenden, und zwar so offt ich will.
TH
<script language="JavaScript">
<!--
Bild1 = new Image();
Bild1.src = "klingonerkunder.jpg";
Bild2 = new Image();
Bild2.src = "getarnt.jpg";
Bild3 = new Image();
Bild3.src = "klingonschwererkreuzer.jpg";
Bild4 = new Image();
Bild4.src = "getarnt.jpg";
var Bild = 1;
function Bildwechsel()
{
if(Bild == 1)
{
Bild = 2;
document.all.DynBild0.filters.blendTrans.Apply();
document.all.DynBild0.src = Bild2.src;
document.all.DynBild0.filters.blendTrans.Play();
}
else
{
Bild = 1;
document.all.DynBild0.filters.blendTrans.Apply();
document.all.DynBild0.src = Bild1.src;
document.all.DynBild0.filters.blendTrans.Play();
}
{
if(Bild == 2)
{
Bild = 4;
document.all.DynBild1.filters.blendTrans.Apply();
document.all.DynBild1.src = Bild4.src;
document.all.DynBild1.filters.blendTrans.Play();
}
else
{
Bild = 3;
document.all.DynBild1.filters.blendTrans.Apply();
document.all.DynBild1.src = Bild3.src;
document.all.DynBild1.filters.blendTrans.Play();
}
}
}
//-->
</script>
</head>
<body>
<img id="DynBild0" src="klingonerkunder.jpg" style="cursor:se-resize; filter:blendTrans(Duration=1)"
onMouseOver="Bildwechsel(1)" width=300 height=250">
<img id="DynBild1" src="klingonschwererkreuzer.jpg" style="cursor:se-resize; filter:blendTrans(Duration=1)"
onMouseOver="Bildwechsel(2)" width=300 height=250">
Hi
Du hast mehrere Denkfehler gemacht:
1. Es ist sehr freundlich vom IE, dass er die Funktion Bildwechsel überhaupt aufruft.
Du hast sie nämlich ohne Parameter definiert: function Bildwechsel() rufst aber in deinen
Bildern Bildwechsel(1) bzw Bildwechsel(2) auf !!
2. So wie du die function Bildwechsel() definierst tut sie folgendes:
if(Bild == 1)
{
Bild = 2; *****=>Bild wird =2 gesetzt!!*****
document.all.DynBild0.filters.blendTrans.Apply();
document.all.DynBild0.src = Bild2.src;
document.all.DynBild0.filters.blendTrans.Play();
}
der folgende else Zweig wird nicht abgearbeitet.(soo ja auch so sein)
Aber der zweite if Zweig (if Bild==2) wird (weil Bild ja oben gleich zwei gesetzt wurde!!)
natürlich auch ausgeführt. Folge:Bild=4
Beim allen weiteren Durchgängen werden dann in beiden if zweigen immer die else Bereiche ausgeführt.(Das soll heissen, dass die beiden Bilder die ja nach dem ersten Durchgang beide gleich getarnt.jpg sind, durch getarnt.jpg also gar nicht ersetzt werden)
Lösung:
Bild1=1;Bild2=1;
function Bildwechsel(BildNr)
{
if (BildNr == 1)
{
if(Bild1 == 1)
{
Bild1 = 2;
document.all.DynBild0.filters.blendTrans.Apply();
document.all.DynBild0.src = Bild2.src;
document.all.DynBild0.filters.blendTrans.Play();
}
else
{
Bild1 = 1;
document.all.DynBild0.filters.blendTrans.Apply();
document.all.DynBild0.src = Bild1.src;
document.all.DynBild0.filters.blendTrans.Play();
}}
else
{
if (Bild2 == 1)
{
Bild2 = 2;
document.all.DynBild1.filters.blendTrans.Apply();
document.all.DynBild1.src = Bild4.src;
document.all.DynBild1.filters.blendTrans.Play();
}
else
{
Bild2 = 1;
document.all.DynBild1.filters.blendTrans.Apply();
document.all.DynBild1.src = Bild3.src;
document.all.DynBild1.filters.blendTrans.Play();
}}}
Ich habe leider keinen IE4/5 zur Hand um das zu testen, müsste aber eigentlich funktionieren.
Es wäre nett, wenn Du noch mal bescheid sagst ob es so klappt.
Viel Spass Holger