Blend Transition Filter

Blend Transition Filter ei kuulu viralliseen, W3C:n CSS1- tai CSS2 -standardiin, mutta ne omat kuna DHTML -määrittelyssä. Blend Transition Filter määritteet toimivat vain Microsoftin selaimissa versiosta 4.0 lähtien.

Blend Transition Filter?

Blend Transition Filter on sekoittava, eli se muuttaa elementin toiseksi pikkuhiljaa. Sekoitustapoja ei voi määrittää, ainoastaan aikaa voi säädellä. BlendTrans filtteriä ei voi käyttää sivun latautumisen yhteydessä, vaan se täytyy aina sitoa jonkin elementin latautumisen yhteyteen!-

Syntaksi

{ filter: BlendTrans (Duratio=?)}

Duration: siirtymän aika, joka voidaan antaa muodossa 2.5

Esimerkki:

Blend Transition Filterin käyttö vaatii kolmea eri asiaa:

  1. Scripti:
    (Scripti vaihtaa alkuperäisen kuvan uuteen)

    <script language="JavaScript"><!--
    function vaihto() {
    window.kuva.filters[0].Apply();
    window.kuva.innerHTML = "<div> <img src=img/kuva3.gif> </div>";
    window.kuva.filters[0].Play();
    } -->
    </script>


  2. DIV-elementti jossa kuva:
    (div-elemetti sisältää alkuperäisen kuvan sekä filtterin)

    <div id="kuva" style="width:120px; height:120px;
    filter:BelndTrans(duration=3)">
    <img src="img/kuva1.gif" width="120" height="120">
    </div>

  3. Liipaisu (eli toiminto joka suorittaa scriptin):
    (Vaihto suoritetaan kun linkkiä napsautetaan)

    <a href="#vaihto" onClick="vaihto()">
Näytä vaihto

Alla muutama idea jolla voit muutta filtterin käyttöä:

Raveal Transition Filter

Samaa periaatetta voidaan käyttää myös Raveal Transition Filterin käyttöön. Vaihdat vain kohtaan 2 seuraavan koodin:

filter:RevealTrans(duration=2, transition=23)

Näytä vaihto.

<<Alkuun

© Petteri Perälä 2001.
E-mail: [ petepe@mbnet.fi ].