Ha a web lapunk egy objektumához szeretnénk ilyen szűrőt felhasználni, akkor nem kell mást tennünk, mint egy speciális stílust megadni:
<img style="filter:progid:DXImageTransform.Microsoft.BlendTrans(Duration=1);" src="/Filter03/1.gif"/>
Majd szűrő megadása után elindítanunk az effekt lejátszását.
Nézzük most milyen tulajdonságokkal rendelkezik a BlendTrans nevű szűrő.
Duration
Osztály: DXImageTransform.Microsoft.BlendTrans
Duration
Az effekt lejátszásának idejét a Duration property-ben adhatjuk meg. Pl.: Duration = 2.5 esetén az effekt 2.5 másodperc alatt játszódik le.
Enabled
Osztály: DXImageTransform.Microsoft.BlendTrans
Enabled
Ha az Enabled igaz, akkor az effekt engedélyezett, ellenkező esetben nem lesz hatása.
Percent
Osztály: DXImageTransform.Microsoft.BlendTrans
Percent
Az effekt futásának pozíciója határozható meg, vagy állítható be százalékos formában. Nulla értéknél indul az effekt és száz százaléknál lesz befejezve.
Status
Osztály: DXImageTransform.Microsoft.BlendTrans
Status
Az effekt aktuális állapotát a Status property-n keresztül olvashatjuk ki. Ennek értéke az alábbiak egyike lehet:
| Érték |
Leírás |
| 0 |
az effekt le van állítva |
| 1 |
az effekt alkalmazásra készen áll |
| 2 |
az effekt lejátszás alatt áll |
Nézzük miként alkalmazható a gyakorlatban ez az effekt, melynek lejátszását valamilyen eseményhez kell kötnünk. Ez lehet mondjuk a web lap letöltődése (OnLoad), de akár egy kattintás is valamely objektumon. Az egyszerűség kedvéért két nyomógombot helyeztünk el a web lapon, melyek segítségével megjeleníthetjük, illetve eltüntethetjük a HTML objektumokat a BlendTrans filter segítségével. A lejátszás idejét és a folyamat százalékát két DrowDownControl-ból választhatjuk ki. A két nyomógombhoz két kis javascript-et készítünk, mely elvégzi az effekt lejátszását. Amikor tehát az egyik gombra kattintunk, akkor kerül meghívásra a script.
<INPUT type="button" onclick="Hide(Image1, DropDownList2, DropDownList1)" ... >
A script-ben hozzárendeljük a paraméterként kapott HTML objektumhoz a szükséges filtert. Majd elindítjuk az effekt lejátszását.
function Hide(obj, dur, perc) {
obj.style.filter="blendTrans(duration="+dur.value+";percent="+perc.value+")";
if ((obj.visibility != "hidden") && (obj.filters.blendTrans.status != 2)) {
obj.filters.blendTrans.Apply();
obj.style.visibility="hidden";
obj.filters.blendTrans.Play();
}
}
Az eltüntetés és a megjelenítés funkciója között csak annyi a különbség, hogy a Visibility tulajdonságot hol Hidden, hol pedig Visible értékre kell állítanunk. Ezzel adhatjuk meg, hogy a látható objektum eltűnjön, illetve a nem látható objektum megjelenjen.
function Show(obj, dur, perc) {
obj.style.filter="blendTrans(duration="+dur.value+";percent="+perc.value+")";
if ((obj.visibility != "visible") && (obj.filters.blendTrans.status != 2)) {
obj.filters.blendTrans.Apply();
obj.style.visibility="visible";
obj.filters.blendTrans.Play();
}
}