 |
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
I kdy₧ u₧ o statick²ch filtrech bylo mnoho °eΦeno v p°edchozφ sΘrii Φlßnk∙, rßd bych struΦn∞ zopakoval alespo≥ pßr zßkladnφch informacφ. StatickΘ filtry dokß₧φ na webov²ch strßnkßch vytvo°it velice zajφmavΘ vizußlnφ efekty. M∙₧ete s nimi nap°φklad deformovat obrßzky, ani₧ byste je poÜkodili, ale aplikovat je lze i na jinΘ prvky dokumentu. Jejich nespornou v²hodou p°itom je, ₧e b∞₧φ na stran∞ klienta a nezat∞₧ujφ tak spojenφ se serverem.
Novß syntaxe, definovanß Microsoftem, ale samoz°ejm∞ funguje pouze v prohlφ₧eΦφch tΘto firmy, a to navφc jen v nejnov∞jÜφch verzφch jejich prohlφ₧eΦ∙. StatickΘ filtry, o kter²ch bude dnes °eΦ, vßm tedy budou pracovat jenom v prohlφ₧eΦφch MSIE od verze 5.5 a nejsou zahrnuty do ₧ßdn²ch standard∙! Proto bych vßm spφÜe doporuΦoval pou₧φvat syntaxi dle CSS, kterß vßm sice neumo₧nφ vyu₧φt nejnov∞jÜφ filtry, ale do budoucna by m∞la b²t za°azena do standardu CSS3 a bude vφce kompatibilnφ se starÜφmi prohlφ₧eΦi.
Syntaxe vlastnosti filter
Ne₧ se podφvßme na jednotlivΘ filtry, pokusφm se vßm p°iblφ₧it syntaxi t∞chto filtr∙ dle definice Microsoftu. Je velice podobnß syntaxi jazyka CSS, ovÜem v definici je pou₧ito slovo "Microsoft". Zßkladnφ syntaxe vydapß nßsledovn∞: <ELEMENT STYLE = "filter:progid:DXImageTransform.Microsoft.Nazev_statickeho_filtru (filter_param1, filter_param2, filter_param3, ...);">
Aby vÜe nebylo tak jednoduchΘ, chovajφ se n∞kterΘ filtry s pou₧itφm tΘto syntaxe jinak, ne₧ p°i pou₧itφ syntaxe dle jazyka CSS. N∞kterΘ filtry jsou navφc s touto syntaxφ nepou₧itelnΘ.
P°φstup k vlastnosti filtr pomocφ skript∙ mß nßsledujφcφ syntaxi: object.style.filter = "progid:DXImageTransform.Microsoft.Nazev_statickeho_filtru (filter_param1, filter_param2, filter_param3, ...)"
Vlastnost filter je s touto definicφ pou₧itelnß u velkΘ v∞tÜiny element∙ (X)HTML. Pouze u element∙ DIV a SPAN musφ b²t stejn∞ jako i u starΘ syntaxe definovßn atribut height nebo width a pozice nastavena na absolute.
P°ehled filtr∙
Zde uvßdφm p°ehledovou tabulku vÜech statick²ch filtr∙, kterΘ jsou pou₧itelnΘ pouze s touto syntaxφ, spolu s jejich struΦn²m popisem a pou₧iteln²mi parametry:
| Nßzev filtru | Efekt | Parametry |
| BasicImage | Nahrazuje filtry FlipH, FlipV, Gray, Invert, Xray (pou₧itelnΘ se starou syntaxφ). | enabled=boolean, grayscale=boolean, invert=boolean, mask=boolean, maskcolor=integer, mirror=boolean, opacity=floating-point, rotation=integer, xray=boolean |
| Compositor | Zobrazφ nov² prvek se zm∞n∞nou pr∙hlednostφ urΦit²ch oblastφ prvku p∙vodnφho. Funguje jako p°echod, ale p°edßvß pouze statick² obsah. | function=integer |
| Emboss | Vyryje sv∞tlΘ Φßsti prvku do ΦernobφlΘho podkladu. | bias=floating-point, enabled=boolean |
| Engrave | Vyryje tmavΘ Φßsti prvku do Φernobφleho podkladu. Opak filtru Emboss. | bias=floating-point, enabled=boolean |
| ICMFilter | Konvertuje(p°em∞nφ) barevn² obsah prvku na zßklad∞ ICM (Image Color Management) profilu. | colorspace=string, intent=integer |
| MaskFilter | Vytvo°φ ze zadanΘ barvy prvku pr∙svitnou masku. Identick² s filtrem Mask (pou₧iteln² se starou syntaxφ). | color=#RRGGBB, enabled=boolean |
| Matrix | Zm∞nφ velikost prvku Φi jej libovoln∞ natoΦφ podle jakΘkoli osy. | dx=floating-point, dy=floating-point, enabled=boolean, filtertype=string, m11=floating-point, m12=floating-point, m21=floating-point, m22=floating-point, sizingmethod=string |
| MotionBlur | Vytvo°φ iluzi prvku v pohybu. Identick² s filtrem Blur(pou₧iteln² se starou syntaxφ). | add=boolean, direction=integer, enabled=boolean, strength=integer |
Malß ukßzka
V krßtkosti vßm p°edvedu, co dokß₧φ filtry, o kter²ch v tomto Φlßnku byla °eΦ. Tento p°φklad ukazuje mo₧nost pou₧itφ filtru Matrix, kter² dokß₧e prvek otoΦit opravdu dle libosti:
Ukßzka novΘho filtru Matrix
Zdrojov² k≤d transformace: <div style="width: 500px; height: 300px; filter:progid:DXImageTransform.Microsoft.Matrix(m11=2, m12=1.5, m21=0.8, m22=2);"><img src="matrix.gif" alt="Ukazkovy obrazek - s pouzitim filtru" border="0"><br> Ukßzka novΘho filtru Matrix</div>
Prav² obrßzek je kopiφ prvku, kter² by vznikl pou₧itφm filtru Matrix na lev² obrßzek s textem v prohlφ₧eΦi MSIE 6.0. Zde jsem ale vyu₧il sejmutΘho obrßzku, aby v²sledek mohli zhlΘdnout i u₧ivatelΘ jin²ch prohlφ₧eΦ∙.