Nové přechody z dílny Microsoftu

Protože původních přechodů bylo málo a syntaxe byla až příliš jednoduchá a nevyužitá, přišel Microsoft se sérií nových přechodů, které plně nahrazují původní sadu a navíc ji ještě rozšiřují. Podívejme se na jejich přehled.

Nové přechody

O problematice přechodů jsem psal již v předchozím článku, věnovaném přechodům v CSS, proto jenom připomínám, že dva původní přechody (BlendTrans – stmívací přechod a RevealTrans – zobrazovací přechod), použitelné pouze se starší syntaxí, nahradil Microsoft sérií nových přechodů, které však již fungují pouze s nově definovanou syntaxí. Právě těmto novým filtrům je věnován tento článek.

Nová syntaxe vlastnosti filter

Pro definování přechodů používáme stejně jako u statických filtrů a původní syntaxe vlastnosti filter jazyka CSS, která zatím není zahrnuta do žádného standardu CSS. Rozdílem vůči původní syntaxi je použití složitého textové řetězce před názvem filtru, jinak se syntaxe nijak neliší. Stejná zůstala i syntaxe pro přístup ovládacích skriptů k přechodům.

Synatxe podle Microsoftu:

{ filter: progid:DXImageTransform.Microsoft.Nazev_prechodu(prechod_param1, prechod_param2, prechod_param3, …); }

Syntaxe pro přístup skriptů:

objekt.style.filter = „nazev_prechodu(prechod_param1, prechod_param2, prechod_param3, …)“

Tyto přechody jsou v současné době bez problémů použitelné v prohlížečích MSIE 5.5 a vyšších. Nejsou ale součástí žádných standardů a pravděpodobně nebudou zahrnuty ani do CSS3, neboť se jedná výlučně o syntaxi Microsoftu.

Řídící skripty

Pro spouštění přechodů používáme řídící skripty, o kterých jsem již podrobněji psal a tak se k nim nebudu podrobněji vracet. Stručně, pro používání přechodů jsou tu připraveny metody apply, play a stop a událost onfilterchange. Metoda apply aplikuje přechod, metoda play spouští samotný přechod a metoda stop jej v případě potřeby zastaví.

Synatxe pro přístup k metodám:

objekt.filters[id_prechodu].Nazev_metody([parametr_prechodu])

Přehled přechodů

Malá ukázka

Čeho můžeme dosáhnout například pomocí přechodu GradientWipe vám nyní ukáži a vysvětlím na jednoduchém příkladě. Kompletní zdrojový kód:

<script>
 <!–
 var stav = 0;
 function gwipe() {
   kontejner.filters[0].Apply();
    if (stav==0) {
      stav = 1;
      obr.src=“prechod2.gif“;}
    else {
      stav = 0;
      obr.src=“prechod1.gif“;}
   kontejner.filters[0].Play(duration=3);}
 –>
</script>
<div id=“kontejner“ style=“width:250px; height:210px; filter:progid:DXImageTransform.Microsoft.GradientWipe(gradientsize=1.0,wipestyle=1,motion=forward);“>
<img src=“prechod1.gif“ id=“obr“ width=“250px“ height=“210px“ alt=“Logo“ />
</div>
<button onclick=“gwipe()“>Spustit přechod GradientWipe</button>

Pro vysvětlení doplním ještě zdrojový kód o stručný komentář toho nejdůležitějšího. Ovládací funkce gwipe() nejprve připraví přechod zavoláním metody apply(), potom nastaví konečnou hodnotu atributu src prvku obr. Nakonec spustí přechod zavoláním metody play() daného přechodu. Přechod jako takový i se svými parametry je potom definovám v atributu style rodičovského prvku kontejner vlastností filter. Nesmíme ale zapomenout, že u elementů div a span je stejně jako u statických filtrů nutné nadefinovat atribut width nebo height!

Další zdroje

• MSDN Microsoft – nejucelenější zdroj informací o této problematice
• W3C CSS – referenční autorita jazyka CSS