Jak na filtry v dynamickém HTML - Builder.cz - Informacni server o programovani

Navigace:  » Úvodní stránka  » Rubriky  » JavaScript  

30. dubna 2001, 00.00 | Pokud vytváříte WWW stránky, určitě často narážíte na problém, jak stránku zajímavým způsobem oživit a zároveň příliš nezvětšit její velikost. Oba tyto požadavky splňují filtry v dynamickém HTML. My si dnes ukážeme, jak se s tímto mocným prvkem pracuje.

Pokud vytváříte WWW stránky, určitě často narážíte na problém, jak stránku zajímavým způsobem oživit a zároveň příliš nezvětšit její velikost. Oba tyto požadavky splňují filtry v dynamickém HTML. My si dnes ukážeme, jak se s tímto mocným prvkem pracuje.

Úvodem se ještě sluší podotknout, že filtry jsou podporovány pouze Internet Explorerem od verze 4, což jsou ale u nás bezkonkurenčně nejpoužívanější prohlížeče.

Pro začátek, abychom věděli o čem bude řeč, si ukážeme příklad jednoduchého filtru. Zkuste tedy přejet myší nad následujícím odkazem:

Příklad jednoduchého filtru

Jak se filtry definují
Filtry můžeme aplikovat na text i na obrázky, a to pomocí vlastnosti filter v CSS. Takže základní zápis by vypadal asi takto:

<span style="filter: jméno filtru (první parametr filtru=hodnota, druhý parametr filtru=hodnota); width:120px; height:100px;">text, na který je aplikován filtr</span>

a u obrázku:

<img src="obrazek.gif" style="filter: jméno filtru (první parametr filtru=hodnota, druhý parametr filtru=hodnota);">

Všimněte si, že u tagu span uvádíme kromě atributu filter i atributy width a height. Pokud totiž chceme aplikovat filtry na tagy span nebo div, musíme jim definovat šířku a výšku nebo absolutní pozici (v našem příkladě bychom tedy místo width:120px;height:100px; uvedli position:absolute;).

Použití filtrů ve skriptech
Potenciál filtrů je ale naplno využit až ve spojení se skripty. Základní syntaxe je následující:

element.style.filter = "jméno filtru (první parametr filtru=hodnota, druhý parametr filtru=hodnota)";

Opět připomínám, že pokud aplikujeme filtry na tagy span či div, musíme uvést výšku a šířku či absolutní pozici.

Nyní se podívejte na dva příklady použití filtrů ve spojení s událostmi - pomocí funkcí a "kouzelného" slovíčka this:

<script type="text/JavaScript"> function pridejFiltr () { if (!document.layers) mujSpan.style.filter = "jméno filtru (první parametr filtru=hodnota, druhý parametr filtru=hodnota)"; } function odeberFiltr () { if (!document.layers) mujSpan.style.filter = " "; } </script> <span id="mujSpan" událost="pridejFiltr();" událost="odeberFiltr();" style="width:120px;height:100px;">text, na který je aplikován filtr</span>

<span událost="if (!document.layers) this.style.filter='jméno filtru (první parametr filtru=hodnota, druhý parametr filtru=hodnota)';" událost="if (!document.layers) this.style.filter=' ';" style="width:120px;height:100px;">text, na který je aplikován filtr</span>

Všimněte si, že před definováním filtrů používáme podmínku if (!document.layers). Díky té není následující kód zpracováván Netscape Navigatorem, protože ten zná zápis document.layers.

Pomocí funkcí nebo this můžeme úplně stejným způsobem definovat filtry i u obrázků.

Jak aplikovat více filtrů na jeden element
Filtry můžeme samozřejmě libovolně kombinovat dohromady a dosáhnout tak opravdu zajímavých efektů. Musíme ale dávat velký pozor, abychom to nepřehnali a návštěvník našich stránek po jejich shlédnutí vyděšeně neutekl :-) Syntaxe je následující:

<span style="filter: jméno prvního filtru (první parametr filtru=hodnota, druhý parametr filtru=hodnota), jméno druhého filtru (první parametr filtru=hodnota, druhý parametr filtru=hodnota); width:120px; height:100px;">text, na který jsou aplikovány filtry</span>

a u skriptů:

element.style.filter = 'jméno prvního filtru (první parametr filtru=hodnota, druhý parametr filtru=hodnota), jméno druhého filtru (první parametr filtru=hodnota, druhý parametr filtru=hodnota)';

Zde je třeba poznamenat, že mezi jednotlivými filtry musí být čárka a mezera a musí být definovány na jedné řádce, jinak nebudou fungovat!

Samozřejmě i tady můžeme použít jak zápis pomocí funkcí, tak this, syntaxe je totožná.

Závěrem
Dnes jsme si ukázali různá úskalí práce s filtry. V příštím článku si všechny filtry i s jejich parametry představíme.