ZONER Cookies

Vážený návštěvníku, potvrzením pomocí tlačítka OK udělujete souhlas nám a našim partnerům s použitím cookies pro nezbytné, analytické a marketingové účely na tomto zařízení. Volbou Nastavení můžete sami určit, jaké skupiny cookies je možné zpracovávat, popřípadě jejich zpracování úplně zakázat. Ukládání nezbytných cookies probíhá vždy, a to v zájmu zachování funkčnosti webové prezentace.

V tomto okně můžete zvolit kategorie cookies v souladu s vlastními preferencemi.

Nezbytné

Tyto cookies zajišťují bezchybný provoz našich webových stránek. Umožňují například vložení služby do objednávky, ukládání dat s ohledem na bezpečnost webu, přihlašování k webu a podobně. Nezbytné cookies nelze deaktivovat, jelikož by došlo k narušení správného fungování webu.

Preferenční

Preferenční cookies umožňují, aby si webová stránka zapamatovala informace, které mění, jak se webová stránka chová nebo jak vypadá. Je to například preferovaný jazyk nebo region, kde se nacházíte.

Analytické

Díky nástrojům jakými jsou například Google analytics můžeme sledovat, jak stránky používáte, z jakých zdrojů a technologií. Na základě těchto dat můžeme web neustále vylepšovat, aby byl pro vás co nejpřívětivější. Veškerá data jsou anonymizována, konkrétní uživatele tedy identifikovat nemůžeme.

Marketingové

Společně s nástroji třetích stran můžeme zobrazovat vámi preferované reklamy v partnerských sítích přesně dle vašich zájmů. V případě nesouhlasu je vysoce pravděpodobné, že vaše zájmy a preference nebudou zohledněny a bude se vám reklama zobrazovat plošně. Veškeré profily vašich zájmů jsou pseudonymizované, díky tomu není možná bezprostřední identifikace vaší osoby.

JavaScriptové bannery 2.

16. února 2000
•
Martin Komárek

Související

V dalším článku o animacích vytvořených pomocí Javascriptu a DHTML si představíme filtr revealTrans(), který umožňuje přes 20 různých efektů, kterými můžeme obohatit jednoduché obměňování obrázků. Dále si ukážeme, jak při animaci průběžně měnit jednotlivé filtry.

Na začátek připomínám, že uvedené animace jsou funkční v MSIE 4.0 nebo vyšších verzích tohoto prohlížeče. Netscape Navigator filtry nepodporuje, takže se zde musíme spokojit s pouhým střídáním obrázků.

Filtr RevealTrans()

Tento filtr umožňuje 24 různých efektů při přechodu mezi jednotlivými obrázky. Filtr definujeme přímo v tagu <img> pomocí parametru style např. takto:

<img src=“clanek_obrazek1.gif“ border=“0″ width=“150″ height=“113″ style=“filter:revealTrans(duration=3, transition=1)“ >

U tohoto filtru lze nastavit dva parametry: jednak dobu působení daného filtru (parametr duration), který je udáván v sekundách, jednak typ filtru (parametr transition). Kompletní přehled jednotlivých možných přechodů naleznete v níže uvedené tabulce. Protože jsem nenašel výstižné české ekvivalenty k anglickým názvům, uvádím původní označení z dokumentace Microsoftu.

Typ přechodu Hodnota
Box in 0
Box out 1
Circle in 2
Circle out 3
Wipe up 4
Wipe down 5
Wipe right 6
Wipe left 7
Vertical blinds 8
Horizontal blinds 9
Checkerboard across 10
Checkerboard down 11
Random dissolve 12
Split vertical in 13
Split vertical out 14
Split horizontal in 15
Split horizontal out 16
Strips left down 17
Strips left up 18
Strips right down 19
Strips right up 20
Random bars horizontal 21
Random bars vertical 22
Random 23

Dynamické změny filtrů

Využití filtru revealTrans() si ukážeme na malé ukázce. Vyjdeme z minulého dílu, tentokráte ovšem použijeme filtr revealTrans a postupně využijeme všech typů přechodů mezi obrázky (budeme průběžně měnit parametr transition).

V první fázi musíme obrázky, které budeme animovat, načíst do cache počítače:

<script language=“javascript“>
<!–
doba=3500;
pocet = 4;
rotator=0;
transtyp=0;
obrsrc = new array(pocet);
obrsrc[0]=“obrazek1.gif“;
obrsrc[1]=“obrazek2.gif“;
obrsrc[2]=“obrazek3.gif“;
obrsrc[3]=“obrazek4.gif“;
obr = new array(pocet);
for (i=0; i < pocet; i++){
obr[i]= new image();
obr[i].src= obrsrc[i] }
//–
</script>

Samozřejmě musíme nadefinovat i vlastní obrázek. V parametru style pak nadefinujeme i filtr. Dobu působení filtru nastavíme na 3 sec. (parametr duration).

<img src=“clanek_obrazek1.gif“ name=“obraz“ ID=“sample“ border=“0″ width=“150″ height=“113″ style=“filter:revealTrans(duration=3, transition=1)“>

Funkce, která provede vlastní animaci pak vypadá následovně:

<script language=“javascript“>
<!–
function rotate(obr) {
if (rotator==pocet) {rotator=0;}
if (window.document.sample){
//animace pro MSIE
if( transtyp>23){transtyp=0};
sample.filters.revealTrans.transition=transtyp;
sample.filters.revealTrans.Apply();
sample.src = obrsrc[rotator];
sample.filters.revealTrans.Play();
transtyp=transtyp + 1
}
else {
// náhradní řešení pro NN
document.images[„obraz“].src = obrsrc[rotator];
}
rotator = rotator + 1
window.setTimeout(‚rotate();‘,doba);
}
//–
</script>

Řadu příkazů známe již z minulého dílu, takže se o nich jen krátce zmíním: Prohlížeč nejprve zjistí, zda-li je podporován objekt sample. V případě že není, provede se pouhé střídání obrázků. V opačném případě se provede úplná animace. Tu spustíme pomocí příkazů Apply() a Play(). Oproti skriptu z minulého dílu určujeme v každém cyklu typ filtru pomocí proměnné transtyp, kterou postupně měníme. To nám umožňuje postupné obměňování typu filtru během animace. Aby byla funkce, provedena musíme ji zavolat, například hned při načtení stránky:

<body onLoad=“rotate();“>

Zobrazit ukázku (kompletní zdrojový kód skriptu).

Předchozí článek Libovolné pozadí formulářových prvků
Další článek Tipy a triky při tvorbě XHTML
Štítky: Články
Martin Komárek

Mohlo by vás také zajímat

Nejnovější

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *