prázdniny téměř zapomněl, jak se s počítači pracuje (jediný můj kontakt s nimi
byl občas v Inet-kavárně, kde jsem odpovídal na vaše zajímavé dotazy ;)). Dle
ohlasů na poslední článek jsem vám ale evidentně kápl do noty, a tak se pokusím
ve stejném stylu z pochopitelných důvodů až příště ;) pokračovat. Pro dnešek si
tedy alespoň vysvětlíme jednotlivé postupy, které budeme v dalším dílu
potřebovat. Jak jsem již zmiňoval, ohlasy byly značné a velká část z nich
zahrnovala i různé dotazy, z nichž jsem dnes vybral jeden, který by mohl být
přínosem i pro ostatní. Odpovím na něj zde, v sekci "Poradna pro čtenáře", jež
se od tohoto dílu bude pravděpodobně vyskytovat i v těch následujících. Dodám
jen, že jako již minule, tak i nyní můžete všechny ukázky nalézt v souborech na
CD tohoto časopisu.
FILTRY CSS
Byl jsem rozhodnut, že nebudu v seriálu uvádět možnosti a postupy definované a
fungující pouze v konkrétních webových browserech, neboť na poli webových
možností preferuji jednotu a bratrstvo ;) a jsem tedy alespoň v tomto ohledu
přívržencem standardizace (proto jsou mi svaté jen standardy definované
konsorciem W3C). Přesto se ale domnívám, že by byla škoda vás ochudit o použití
filtrů pro HTML elementy, o nichž sice nemohu říci, že zapadají do doporučení
W3C, ale zato lze o nich směle tvrdit, že jde o kapitolu "samu pro sebe". Jak
je patrno, nejde tedy o obecně definovaný standard, ale o "standard z dílny
Microsoftu" ;) a funguje tedy plně pouze v browseru Interner Explorer 4 (IE4) a
vyšším. Důvodem zařazení filtrů do tohoto článku byla ale skutečnost, že
částečně obdobnou funkci nabízí i Netscape6 (NS6) a vyšší a bude se navíc
náramně hodit do příkladu, plánovaného pro příští díl tohoto seriálu.
Filtry mění vzhled zvoleného HTML elementu aplikací určitého efektu (majitelé
zrcadlovek jistě již vědí, o čem je řeč ;)). Nutno dodat, že filtr nelze
aplikovat na všechny elementy, ale pouze na ty o čtvercové ploše (IMG, TABLE,
TR, TD, TEXTAREA, INPUT, BUTTON...). Definici filtrů zapisujeme do stejných
oblastí a stejným způsobem jako běžné styly. Dnes si představíme jeden filtr,
který slouží k nastavení stupně průhlednosti HTML elementu. Tento filtr je sice
k dispozici v IE4> a NS6>, nicméně v každém browseru pod jiným názvem a s
odlišnými parametry musíme proto naše HTML přizpůsobit oběma variantám. Jeho
název je
l PRO IE: "Alpha", možné parametry pak: "Opacity" (určuje stupeň průhlednosti,
přičemž 0=zcela průhledná, 100=neprůhledná), "FinishOpacity" (určuje stupeň
průhlednosti v koncové oblasti elementu, přičemž 0=zcela průhledná,
100=neprůhledná), "Style" (specifikuje tvar oblasti, kde 0=jednotný tvar,
1=přímočarý tvar, 2=paprskovitý tvar a 3=obdélníkový tvar), "StartX"
(souřadnice počátku oblasti X), "StartY" (souřadnice počátku oblasti Y),
"FinishX" (souřadnice konce oblasti X), "FinishY" (souřadnice konce oblasti Y)
a forma zápisu je stejně jako u všech filtrů v IE následovná: "filter:
název_filtru(parametry)"
l PRO NS: "-Moz-opacity" a možný parametr pak hodnota v rozsahu 0-1, udávající
stupeň průhlednosti (0=zcela průhledná, 1=neprůhledná).
Ukažme si tedy příklad, jenž je funkční v obou browserech (obrazky.html):
onMouseOver="this.style.filter=\Alpha:opacity=100\; this.style.MozOpacity=1"onMouseOut="this.style.filter=\Alpha(opacity=50)\; this.style.MozOpacity=0.5">
onMouseOver="this.style.filter=\Alpha:opacity=100\;this.style.MozOpacity=1"
onMouseOut="this.style.filter=\Alpha(opacity=50)\; this.style.MozOpacity=0.5">
... k ukázce myslím není třeba příliš dodávat. Snad jen to, že slovíčko "this"
slouží stejným způsobem, jako bychom uvedli
"document.getElementById("pesobr")". Označuje tedy vnitřní objekt, neboli
objekt, v němž je právě použito.
Ve výsledné podobě bude příklad vypadat následovně:
A to už je pro tentokrát opravdu všechno. Pište e-maily s dotazy na adresu
j.kysela@web-brana.cz, třeba příště zodpovím právě ten vás a prozatím se mějte
hezky a za měsíc opět již u výjimečně rozsáhlého dílu na shledanou!
Poradna pro čtenáře
Čtenář (M. M. z Chrudimi) se ve svém dotazu ptá, zdali by bylo možné nahradit
obrázky v galerii z minulého dílu stránkami HTML. Tedy lze-li vytvořit jakousi
galerii, zobrazující v menu zvolené stránky. Odpověď mohu vyjádřit lidovým
rčením "když se chce, všechno jde"! Nám se tedy bude chtít a pokusíme se tento
nápad zrealizovat. Nejprve si připravíme potřebné ukázkové HTML, nazvěme je
třebas "pes.html", "kocka.html" a "kralik.html". Jelikož požadujeme prohlížení
celých stránek se vším všudy, bude třeba naše HTML s výběrovým menu separovat
do samostatné části obrazovky. K tomu nám výborně poslouží rámce (frames). Ty
si definujeme v hlavním souboru (např. index.html) následovně:
...z čehož vyplývá, že jsme vytvořili dvě okna, první (100 pixelů vysoké) se
stránkou, obsahující ovládací menu, která se jmenuje "menu.html", a druhé, jež
budeme používat pro zobrazení zvolené HTML stránky. Na počátku v něm zobrazíme
ukázkovou stránku, nazvanou "pes.html". V rámci s menu vypínáme možnost
scrollingu, neboť je to v tomto případě zbytečné, v druhém rámci je třeba ji
naopak povolit.
Podívejme se ale nyní na samotnou řídicí stránku (menu.html):
Vyberte stranku:
... pro seznam jsme zvolili formulářový element SELECT tedy výběrové výsuvné
menu (tzv. listbox), které bude obsahovat jednotlivé názvy našich HTML stránek.
Jako počáteční vybranou položku seznamu jsme výrazem selected zvolili první
stránku. Identifikátorem (id="ZvolStr") si seznam, tedy tento HTML element,
označujeme (jménem ZvolStr), abychom s ním později mohli pracovat a odkazovat
se na něj. Druhým parametrem pak stanovíme, aby se při každé změně výběru
položky (při události onChange z angl. "při změně") seznamu udělalo právě to,
co potřebujeme tedy aby se zobrazila požadovaná stránka, spustí se uvedená
funkce, která se jmenuje ZmenStr. Ta již požadovanou stránku pěkně na obrazovku
vykreslí. Její pochopení bude vzhledem k tomu, že se skládá pouze z jednoho
řádku tedy pro každého jistě hračkou. Metoda getElementById, jejímž vstupním
parametrem je hodnota atributu ID našeho HTML elementu, vrací odkaz na
identifikovaný objekt tohoto elementu v DOM, jež obsahuje vlastnost "value", ve
které je uchováván aktuálně zvolený parametr listboxu. Získali jsme tedy
parametr, jenž je zároveň názvem HTML souboru, který se má zobrazit. Nezbývá
tedy, než jej metodou "open" (jedná se o metodu objektu window, proto není
nutné zadávat zdlouhavé "window.open") ve zvoleném okně, které určujeme druhým
parametrem metody, otevřít. Její syntaxe je následující: "open(URL,jméno_okna
[,možnosti])", přičemž parametr možnosti je volitelný a může obsahovat
následující přepínače: "toolbar" (vytváří toolbar s tlačítky jako "Zpět" a
"Vpřed" 1=ano, 0=ne), "location" (vytváří řádku s umístěním dokumentu 1=ano,
0=ne), "directories" (vytváří standardní adresářové okno browseru), "status"
(vytváří statusovou řádku na spodu okna 1=ano, 0=ne), "menubar" (vytváří menu
na vrchu okna 1=ano, 0=ne), "scrollbars" (vytváří horizontální a vertikální
scrollovací lišty, je-li to třeba 1=ano, 0=ne), "resizable" (dovolí uživateli
změnit velikost okna 1=ano, 0=ne), "width" (určuje šířku okna v pixelech
libovolná hodnota), "height" (určuje výšku okna v pixelech libovolná hodnota).
Tyto volby se však vztahují pouze na nově otevřené okno.
Například:
open("http://www.stranky.cz","Stranky","location=0,
width=400,height=300").
Tolik tedy z dnešní poradny!
PŘEDPLATNÉ
ČLÁNKY DO MAILU