animierte Bildstörung mit CSS Filter
coldarchon
- css
möchte die Filter- Eigenschaften von CSS nutzen um bei einem Bild so eine Art Bildstörung zu animieren (wer immer den Vorspann von Metroid Prime gesehen weiß was ich meine). Nur für IE6 klappt das noch nicht.
Dabei sehen die wichtigen Bereiche der Seite (in Arbeit!) so aus:
<BODY onLoad="testbild(bild)">
<div id="bild">
<IMG SRC="g.bmp" style="visibility: true; z-index=1; top: 100px; left: 100px;"></div>
<div id="blur">
<IMG SRC="g.bmp" style="visibility: true; z-index=0; top: 100px; left: 100px; FILTER:Wave(freq=100,light=1,phase=100,add=1,strength=10)">
</div>
<div id="black">
<IMG SRC="g.bmp" style="visibility: hidden; z-index=2; top: 100px; left: 100px; FILTER:Wave(freq=1,light=1,phase=100,add=0,strength=1) XRay()">
</div>
</BODY>
Die Funktion sieht so aus:
function testbild(bild)
{
var symbol = document.getElementById(bild);
if (symbol.style.visibility == "hidden")
symbol.style.visibility = "visible";
else
symbol.style.visibility = "hidden";
setTimeout("blink()",500);
}
Erhalte die Meldung Objekt erforderlich, aber genauso soll es doch für IE6 sein ???
Erstmal hallo coldarchon,
<BODY onLoad="testbild(bild)">
<div id="bild">
<IMG SRC="g.bmp" style="visibility: true; z-index=1; top: 100px; left: 100px;"></div>
<div id="blur">
<IMG SRC="g.bmp" style="visibility: true; z-index=0; top: 100px; left: 100px; FILTER:Wave(freq=100,light=1,phase=100,add=1,strength=10)">
</div>
<div id="black">
<IMG SRC="g.bmp" style="visibility: hidden; z-index=2; top: 100px; left: 100px; FILTER:Wave(freq=1,light=1,phase=100,add=0,strength=1) XRay()">
</div>
</BODY>Die Funktion sieht so aus:
function testbild(bild)
{
var symbol = document.getElementById(bild);
if (symbol.style.visibility == "hidden")
symbol.style.visibility = "visible";
else
symbol.style.visibility = "hidden";
setTimeout("blink()",500);
}Erhalte die Meldung Objekt erforderlich, aber genauso soll es doch für IE6 sein ???
Du übergibst der Funktion "testbild" einen Parameter. Was soll dieser Parameter sein? Eine Variable oder der Name der id, die du beim <div>-Tag vergeben hast?
In letzterem Fall solltest du den Namen als Literal, das heißt, in Anführungsstriche übergeben. Eine Javascript-Variable mit dem Namen "bild" hast du sonst ausserhalb der Funktion nirgends definiert, deshalb die Meldung "Objekt erforderlich".
Ausserdem solltest du oben bei den Bildern
style="visibility: true;" besser "visibility:visible" verwenden und zusätzlich die Styleangabe "position:absolute;" hinzufügen.
Viele Grüße
Heiko
<BODY onLoad="testbild(bild)">
<div id="bild">
verdammt, weil die Beiden direkt übereinander waren habe ich das nicht gesehen. Danke für den Tipp ...