Filter 4

Anger genomskinlighetsgraden för ett objekt.

Syntax: <ELEMENT STYLE="filter:progid:DXImageTransform.Microsoft.Alpha(Egenskaper)"...>

Exempel:

<INPUT type="button" value="Knapp" style="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);">

Anpassar färgbehandling, bildrotation eller genomskinlighet för innehållet i ett objekt.

Syntax: <ELEMENT STYLE="filter:progid:DXImageTransform.Microsoft.BasicImage(Egenskaper)"...>

Exempel:

<!-- DIV som anger var bilden skall visas -->
<DIV ID="bild" STYLE="position:absolute; left:340px;" ><IMG SRC='bild.jpg'>
</DIV>
<BUTTON onclick="bild.style.filter='progid:DXImageTransform.Microsoft.BasicImage(mirror=1)'">Spegelvänd</BUTTON><BR/>
<BUTTON onclick="bild.style.filter='progid:DXImageTransform.Microsoft.BasicImage(invert=1)'">Invertera</BUTTON><BR/>
<BUTTON onclick="bild.style.filter='progid:DXImageTransform.Microsoft.BasicImage(grayScale=1)'">Gråskala</BUTTON><BR/>
<BUTTON onclick="bild.style.filter='progid:DXImageTransform.Microsoft.BasicImage(xray=1)'">Röntgen</BUTTON><BR/>
<BUTTON onclick="bild.style.filter=''">Originalet</BUTTON><BR/>

Visar fram nytt innehåll i ett objekt genom att tona bort det ursprungliga.

Syntax: <ELEMENT STYLE="filter:DXImageTransform.Microsoft.BlendTrans(Egenskaper)"...>

Exempel:

I HEAD:

<SCRIPT>
function taBort() {
forsvinn.style.filter="blendTrans(duration=2)";
// Kontrollerar att filtret inte arbetar
if (forsvinn.filters.blendTrans.status != 2) {
forsvinn.filters.blendTrans.apply();
forsvinn.style.visibility="hidden";
forsvinn.filters.blendTrans.play();
}
}
function taTillbaka() {
forsvinn.style.filter="blendTrans(duration=2)";
// Kontrollerar att filtret inte arbetar
if (forsvinn.filters.blendTrans.status != 2) {
forsvinn.filters.blendTrans.apply();
forsvinn.style.visibility="visible";
forsvinn.filters.blendTrans.play();
}
}
</SCRIPT>

I BODY:

<!-- DIV måste ha tillräcklig bredd angiven -->
<DIV ID="forsvinn" STYLE="width: 200">
Texten som försvinner
</DIV>
<BUTTON onclick="taBort()">Försvinn!</BUTTON>  <BUTTON onclick="taTillbaka()">Kom tillbaka!</BUTTON>

Försvinn!
Kom tillbaka!

Skapar oskärpa på objektet.

Syntax: <ELEMENT STYLE="filter:progid:DXImageTransform.Microsoft.Blur(Egenskaper)"...>

Visa oskärpa

 Exempel:

I HEAD:

<SCRIPT LANGUAGE="JScript">
function bytUt(bild) {
if (sudda.filters(0).enabled){
sudda.filters(0).enabled='false';
bild.innerText='Visa oskärpa';}
else {
sudda.filters(0).enabled='true';
bild.innerText='Visa skärpa';}
}
</SCRIPT>

I BODY:

<DIV ID="sudda" STYLE="position:absolute; left:340px; filter:progid:DXImageTransform.Microsoft.blur(pixelradius=3, enabled='false')">
<IMG SRC='bild.jpg' />
</DIV>
<BUTTON onclick="bytUt(this)"> Visa oskärpa</BUTTON>

Skapar en "skugga" på objektet.

Syntax: <ELEMENT STYLE="filter:progid:DXImageTransform.Microsoft.DropShadow(sProperties)" ... >

I HEAD:

<SCRIPT>
function enSkugga() {
var skuggan = skuggDIV.filters.item('DXImageTransform.Microsoft.dropshadow').enabled; skuggDIV.filters.item('DXImageTransform.Microsoft.dropshadow').enabled = !skuggan;
}
</SCRIPT>

I BODY:

<DIV ID="skuggDIV" STYLE="cursor:hand;height:40px; padding:10px; font: 14pt arial; filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=8, OffY=5, Color='green', Positive='true')" onclick="enSkugga();">
Klicka på den här texten!</DIV>

Visar innehållet i objektet med graverad struktur i gråskala. Den motsatta reliefeffekten får du genom att byta Engrave mot Emboss.

Syntax: <ELEMENT STYLE="filter:progid:DXImageTransform.Microsoft.Engrave(Egenskaper)"...>

Engrave

I HEAD:

<SCRIPT>
function Gravera(objektet) {
if (engraveDiv.filters(0).enabled){
engraveDiv.filters(0).enabled='false';
objektet.innerText='Engrave';}
else {
engraveDiv.filters(0).enabled='true';
objektet.innerText='Normal';}
}
</SCRIPT>

I BODY:

<DIV ID="engraveDiv" STYLE="position:absolute; left:270px; filter:progid:DXImageTransform.Microsoft.engrave(enabled='false')"> <IMG SRC='bilder/zazu2.jpg'>
</DIV>
<BUTTON onclick="Gravera(this)">Engrave</BUTTON>

Här har jag använt Wave-filtret för att
skapa en annorlunda bildram.

Alla värden kan ändras, vilket gör att
resultatet kan varieras nästan i
det oändliga.

Jag ändrar bredden på ramen genom
att ändra värdet för "padding".

Syntax: <ELEMENT STYLE="filter:progid:DXImageTransform.Microsoft.Wave(Egenskaper)"...>

<DIV ID="waveDIV" STYLE="position:absolute; left:300px; width:205px; height:158px; padding:20px; background:green; filter:progid:DXImageTransform.Microsoft.Wave(Add='true', LightStrength=60, Phase=20, Strength=5, Freq=5)">
<img border="0" src="bild.jpg" width="165" height="118"></DIV>