Hlavní navigace

Kapka CSS - CSS2 - Tipy & triky [IV]

1. 7. 2002

Sdílet

CSS a dynamické HTMLZa několik předchozích dílů seriálu jste se myslím dosytanabažili teorie, obsahující objektové modely, velké množství tabulek apod. Být programátorem teoretikem ...
CSS a dynamické HTMLZa několik předchozích dílů seriálu jste se myslím dosyta
nabažili teorie, obsahující objektové modely, velké množství tabulek apod. Být
programátorem teoretikem jistě není k zahození, ale skutečná situace leckdy
vypadá trochu jinak než teoretické předpoklady už proto se ale od samého
počátku seriálu snažím informovat o reálné situaci na poli webu, především
neocenitelnou informací o tom, zdali a jakým způsobem ten který příkaz funguje
v různých webových prohlížečích a jejích verzích. Doufám, že vám tak moje snahy
byly ku prospěchu a nekonečné testování jednotlivých případů bylo k něčemu
dobré (už jen mít nainstalovaných několik verzí od každého webového prohlížeče
je trochu bláznovstvím ;) ). Přejděme ale k tématu dnešního dílu tohoto
seriálu, kterým jsou příklady, příklady a ještě jednou příklady.

Aby to ale nebyly jen nepraktické ukázky, rozhodl jsem se, že s vámi kousek po
kousku složím dohromady užitečnou aplikaci, kterou jsem vymyslel a jež právě
využívá mnohé z toho, čemu jste se doposud naučili.

Na webu je možné najít nepřeberné množství galerií obrázků, každá je
vypracovaná určitým způsobem většinou mají ale jeden záporný společný
jmenovatel pokud si chcete detailně prohlédnout určitý obrázek, můžete v okně
svého webového prohlížeče zhlédnout vždy jen jeden. Řešením bývá s každým
dalším obrázkem otevřít nový prohlížeč, mezi nimiž pak přepínáte (není tak
výjimkou hlavní lišta celá zaplněná webovými prohlížeči). Stejně tak obvykle
učiníte, chcete-li si obrázky později prohlížet off-line (nepřipojení k
internetu, mnoho uživatelů modemů to jistě důvěrně zná ;) ) jiná možnost jak
všechny obrázky načíst totiž neexistuje (nebereme-li v úvahu probírání se cache
webového prohlížeče, na což ne každý má nervy). Což tedy všechny detailní
obrázky pojmout do jednoho HTML souboru načetly by se naráz, pouze v jednom
okně prohlížeče, což by bylo výhodnější i pro prohlížení off-line! Ano, jistě
to přece není žádná novinka, nahustit vše do jednoho souboru, ale kdo se pak má
probírat tak dlouhým dokumentem? Nekonečná doba scrollování a vyhledávání
požadovaného obrázku jistě není lákavá představa, nehledě na to, jak by tím
utrpěla i estetická stránka dokumentu. Ideální listování obrázky je jistě
takové, s jakým se shledáváme u plnohodnotných aplikací, skutečných grafických
prohlížečů komfortní výběr požadovaného obrázku ze seznamu je zaručen
jednoduchým ovládáním myši, či několika klávesami, kdy se pak zvolený obrázek
zobrazí v plné kráse na obrazovce. Proč si ale takového komfortu nedopřát i na
webu? Že na to nejsou prostředky? Ale kdepak! Podobný jednoduchý prohlížeč
galerie obrázků se mi povedlo napsat tak, že jej zvládly všechny alespoň trochu
novější verze známých webových prohlížečů. Aplikace, kterou si zde sestavíme,
tedy funguje spolehlivě v Internet Exploreru v5.0, Netscapu v6.0 a Opeře v5.0.
Dodám snad jen, že pro ukázku funkčnosti aplikace jsem se souhlasem autora
Josefa Dvořáka (http://www.insect.cz), použil několik jeho nádherných
fotografií motýlů. Jako potěšující novinku ještě dodávám (pro ty, co se stejně
jako já ještě nenaučili psát všemi deseti ;) ), že od dnešního dílu naleznete
veškeré uváděné příklady i na CD časopisu PC WORLD!


Galerie obrázků v DHTML

Popsaná metoda bude vykreslovat na obrazovce vždy jeden obrázek zvolený ze
seznamu určitá, přibližně stejná plocha obrazovky bude využívána pro mnoho
různých obrázků, je tedy v první řadě potřeba umožnit vykreslení všech obrázků
na tutéž plochu obrazovky. K tomu využijeme vlastnosti kaskádových stylů,
konkrétně té pro umístění objektu (v našem případě obrázku) na určitou,
konkrétní polohu obrazovky (proto v absolutním měřítku jak určujeme parametrem
absolute u vlastnosti position, dejme tomu 8 % od horního okraje, což stanovíme
vlastností top), u všech tedy stejnou. Zkusme tak učinit u našich tří obrázků
motýlů:









Když si tento příklad vyzkoušíme, žádným ohromujícím výsledkem překvapeni
zřejmě nebudeme poslední obrázek bude vidět celý, ostatní jím budou překryty,
maximálně budou trochu přečnívat. Takovouto změť obrázků tedy jen tak nechat
nemůžeme zkusíme nechat zobrazit vybraný obrázek a ostatní skrýt. Toho docílíme
použitím vlastnosti visibility z kaskádových stylů pro zviditelnění (parametr
visible) či skrytí (parametr hidden) objektu (resp. obrázku). Podívejme se na
to (pro zkrácení budu uvádět jen tělo HTML):





Na první pohled jsme si příliš nepomohli, faktem ale je, že jsme si právě
vytvořili základ pro zobrazení obrázků vždy na jednom daném místě obrazovky,
což je vlastně jednou z předností naší galerie. Nyní máme zhruba připravenu
půdu pro zobrazování obrázků, pojďme se podívat na to, jak budeme obrázek
vybírat, tedy jak připravit požadovaný seznam.

Jako vhodné se jeví pro seznam zvolit formulářový HTML element SELECT tedy
výběrové výsuvné menu (tzv. listbox), které bude obsahovat jednotlivé názvy
našich obrázků. Nuže:





Jde tedy o běžný formulář se seznamem, který obsahuje naše tři obrázky. Jako
počáteční vybranou položku seznamu jsme výrazem selected zvolili první obrázek.
Možná vás trochu zarazily různé parametry u tagu SELECT tím prvním, konkrétně
identifikátorem (id="zvolobr"), si seznam, tedy tento HTML element označujeme
(jménem zvolobr), abychom s ním později mohli pracovat a odkazovat se na něj
(pochopte: seznam si pojmenujeme proto, abychom na něj potom nevolali "hej,
ty!", ale "Zvolobr!" podobně jako "Ferdo!" ;) ). 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 zobrazil
požadovaný obrázek, spustí se uvedená funkce, která se jmenuje zmenobraz. Ta
již požadovanou fotografii pěkně na obrazovku vykreslí. Seznam by tak byl
rovněž hotov, ale už zde padla zmínka o funkci, jež po výběru položky seznamu
celou změnu obrázku zařídí. Na tu tedy dojde nyní. Funkce je napsána v
JavaScriptu, který uzavřeme mezi tagy SCRIPT, a umístíme ji nikoliv do těla
HTML (mezi tagy BODY), ale do záhlaví (mezi tagy HEAD). Ukažme si ji:



Věřím, že si ještě z minulých dílů pamatujete, co to funkce je, pro ty, co
články nečetli poznamenám, že jde o blok (množinu) příkazů, které se jejím
vyvoláním provedou v našem případě se volá, dojde-li k výběru položky seznamu.
Jak je patrno, funkce se definuje klíčovým slovem "function", za kterým je
uvedeno její jméno (zmenobraz) následované kulatými závorkami (jež mohou
obsahovat různé parametry funkce, ale o tom až později) a poté příkazy,
uzavřenými do složených závorek "{" a "}". Mějme na paměti, že při programování
musíme dodržovat zvyk, oddělovat od sebe všechny příkazy středníkem. Na prvním
řádku uvnitř funkce si vytvoříme proměnnou s názvem poc. Proměnná slouží k
uchovávání údajů (číselných, textových atd.), abychom je mohli v následujících
krocích programu různě vyhodnocovat. Proměnnou deklarujeme (vytváříme) klíčovým
slovem "var", za nímž následuje její jméno, popřípadě inicializace, tzn. že do
proměnné hned uložíme nějakou hodnotu (v našem případě nulu). Na dalším řádku
jsme tak evidentně opět vytvořili novou proměnnou s názvem obraz do které hned
uložíme jistou hodnotu. Tu vyjadřuje getElementsByTagName, metoda objektu
document (v objektovém modelu dokumentu DOM, viz předchozí díly tohoto
seriálu). V minulých dílech jsme si představili metodu getElementById, která
vyjadřuje odkaz na objekt HTML elementu (tagu), jejž identifikujeme, tedy jehož
identifikátor uvedeme jako její parametr. Dnes použitá metoda se oproti ní liší
tím, že vrací nikoliv jeden odkaz, ale celé pole (skupinu) odkazů na objekty
HTML elementů. Navíc jejím parametrem tak není identifikátor, ale pouze název
elementu, což je logické, protože metoda přece zahrnuje odkazy na všechny HTML
elementy tohoto názvu, zastoupené v našem dokumentu. V našem příkladu na
všechny elementy IMG (obrázky). Pro zjednodušení konečně můžeme říct, že
proměnná obraz obsahuje objekty HTML elementů, resp. zastupuje všechny tagy IMG
v našem dokumentu, takže vlastně obsahuje i všechny obrázky v našem dokumentu!
Ale pojďme dále následující řádka způsobí, že všem těmto obrázkům nastavíme
pomocí stylů vlastnost skryté. Příkaz while způsobuje cyklické (opakované)
provádění bloku příkazů (ten vždy uzavíráme mezi závorky "{" a "}"), do té
doby, dokud platí podmínka, uvedená v závorce tohoto příkazu. Proměnná obraz
obsahuje jak již víme pole objektů, takže pokud chceme pracovat jen s jedním
určitým, uvedeme v hranatých závorkách, bezprostředně za jménem proměnné, jeho
číslo, neboť objekty jsou v poli očíslovány od 0 výše. Cyklus se provádí tak
dlouho, dokud je splněna podmínka, že určitý vybraný objekt něco vyjadřuje tedy
v důsledku to, že vlastně obrázek existuje a můžeme s ním nějak manipulovat.
Cyklovaný blok pak zahrnuje dva příkazy, z nichž první nastavuje stylu
konkrétního IMG elementu (potažmo obrázku) vlastnost skrytého, druhý pak k
proměnné poc, která jak již jste asi pochopili vyjadřuje číslo vybraného
objektu, přičte jedničku (výraz poc++ je pouze zkráceninou zbytečně dlouhého
poc=poc+1). Máme tedy zajištěno, že během cyklu postupně všem existujícím
obrázkům nastavíme zmiňovanou vlastnost. Na posledním řádku funkce pak opět
manipulujeme s vybraným objektem, konkrétně s tím, jehož číslo si zjišťujeme
pomocí metody getElementById z našeho seznamu obrázků. Jelikož jsou jak již
bylo řečeno objekty číslovány od nuly, je nutné, aby tak jednotlivé obrázky
seznamu byly číslovány rovněž od nuly (určeno hodnotou parametru value u tagu
OPTION).

Nyní jsme se konečně ocitli ve stadiu, kdy z jednotlivých střípků získáváme
celistvou aplikaci. Zrekapitulujme si tedy ještě celý kód nyní již funkční
galerie obrázků. Ze slušnosti ještě uvedeme v záhlaví HTML (třetí řádek souboru
s META tagem) použitou znakovou sadu ISO-8859-2, obsahující české znaky, a
nastavíme efektní barvy textu a pozadí dokumentu. Takže:










style="visibility:visible;position:absolute;top:8%">
style="visibility:hidden;position:absolute;top:8%">
style="visibility:hidden;position:absolute;top:8%">



Zdá se, že naše aplikace tedy opravdu funguje a mohli bychom dnešní díl
uzavřít. Na první pohled tomu tak skutečně je, ale při bližším zkoumání a
zkoušení vyjdou na povrch některé nepříliš příznivé skutečnosti. Konkrétně
funkci, která vše zařizuje, jsme napsali pro jednoduchost tak, že zpracovává
všechny obrázky v našem HTML dokumentu, to je ale právě kámen úrazu. Co když do
HTML umístíme ještě nějaký obrázek se záměrem nikoliv jako náležící galerii,
ale třebas jen obrázek šipky, jako odkaz na hlavní stránku našeho webu? Jak
zajistíme, aby jej funkce nepovažovala za jeden obrázek z galerie a neskryla
jej? Odpověď zní: v tomto stavu nijak. Je tedy vidět, že k dokonalosti má naše
aplikace ještě poměrně daleko. Proto na ní ještě zapracujeme, abychom problém
eliminovali, a dokonce přidali nějaké vymoženosti navíc. Řešením je postup, kdy
funkce nebude manipulovat se všemi obrázky dokumentu, ale pouze s vybranou
skupinou, dejme tomu s určitým blokem, jímž označíme pouze skutečné obrázky
galerie. Pro blokové označení obrázků zvolíme HTML tag DIV, který
identifikujeme, tedy označíme jménem "galerie". A když už se zrodil nápad
manipulovat s blokem pro výběr skupiny obrázků, můžeme i namísto ovládání
jednotlivých obrázků manipulovat rovněž s bloky, takže jeden velký blok
"galerie" bude obsahovat další bloky, které teprve zahrnují samotné obrázky,
ale i jakékoliv jiné elementy. A jelikož při ovládání bloku se zároveň ovládají
i všechny elementy, které obsahuje (tzv. dědění vlastností), můžeme tak
ovlivňovat nejen obrázky jako ve starém příkladu, ale třeba i text, takže při
zvolení nějaké položky našeho seznamu se pokaždé zobrazí nejen jiný obrázek,
ale i jiný text! To může být užitečné třeba pro zobrazení popisku k obrázku
nebo i dlouhých textů (nebo dokonce dalších obrázků!). Podívejme se tedy, jak
to bude vypadat. A jelikož bude toto již poslední verze této části příkladu,
přidáme jí trochu na estetičnosti prvky jako je centrování apod. Ukázka:




čeleď: Nymphalidae babočkovití
CENTER>



čeleď: Lycaenidae modráskovití
CENTER>



čeleď: Papilionidae otakárkovití
CENTER>



Zbývá tedy ještě pozměnit naší funkci, nicméně změny už nebudou nijak
drastické. Metodou getElementsByTagName budeme chtít získat všechny objekty
elementů DIV (bloky obsahující naše obrázky), ale pouze ty, které jsou součástí
galerie, tedy ty, jež jsou vnořené v elementu DIV, s názvem "galerie". Proto
nejprve použijeme metodu getElement-ById, jako jakýsi filtr, který vyjadřuje
pouze ty elementy, vnořené v námi pojmenovaném elementu. Nyní máme konečně
hotovou i finální verzi naší funkce:



Ty, pro něž toho už bylo v dnešním dílu dost, mohou časopis klidně odložit a
vrátit se k němu později, neboť již mají hotovou skutečně funkční galerii
obrázků.



Kapitola druhá pro zvídavější ;)

Těm zvídavějším tedy nyní mohu nabídnout ještě některá vylepšení naší galerie,
která ji tak povýší na nadstandardní. Pokusíme se zabudovat do galerie podporu
tzv. slide-show, tedy automatického, postupného zobrazování obrázků, vždy po
uplynutí určitého časovém intervalu. Slide-show promítání obrázků můžeme znát
například z různých prezentací, ale je to již služba natolik známá, že ji
podporuje většina dnešních prohlížečů obrázků. Podívejme se nejprve, jak se nám
změní část těla HTML:





časová prodleva: sekund


Oproti dřívějšímu uvedení tohoto seznamu nám přibyly pouze tři nové řádky. V
ukázce na čtvrtém a pátém řádku vkládáme na stránku dvě tlačítka s označením
"Spust slide-show" a "Zastav slide-show". Jejich význam snad netřeba
vysvětlovat ;). Při stisknutí těchto tlačítek (událost onclick, z angl. "při
kliknutí") se pak vyvolají příslušné funkce inicslideshow a zastavslideshow
(popíšeme za chvíli), které se postarají o zahájení a ukončení slide-show
obrázků. Šestým řádkem vkládáme formulářové okénko, obsahující hodnotu, která
vyjadřuje časový interval mezi zobrazením jednotlivých obrázků. Hodnotu, která
udává časový interval v sekundách, může návštěvník stránky samozřejmě libovolně
změnit. Ve výchozím stavu je nastavena na 10 sekund. Nyní si popíšeme zmíněné
funkce, jež budou rovněž jako ta naše první napsány v Java-Sciptu a umístěny
mezi stejné tagy SCRIPT (pro nově přidanou část je v ukázce zvolen jiný odstín
barvy tabulky):



Jak je patrno, přibyly nám celkem tři nové funkce. Jedna má název inicslideshow
a stará se o inicializování služby slide-show (jakoby zakladatel), což obnáší
vykonání potřebných operací pro její zahájení (např. určení časové prodlevy).
Druhá se jmenuje spustslideshow a provádí už kroky slide-show, tedy zobrazí
vždy následující obrázek z galerie (jakoby pracovník). Třetí, zastavslideshow
slouží k předčasnému ukončení slide-show (jakoby likvidátor), stiskne-li
návštěvník stránky k tomu určené tlačítko.

Pojďme si vše ale blíže rozebrat: ve funkci inicslideshow se metoda setInterval
(v DOM jde o metodu hlavního objektu window, proto není nutné uvádět zdlouhavé
window.setInterval) postará o to, aby se pravidelně v určitém intervalu
spouštěla zadaná funkce. Jaká funkce to má být, se uvádí v prvním parametru
(např. tedy "spustslideshow()" netřeba snad připomínat, že parametry oddělujeme
vždy čárkami) a údaj, po jakých časových intervalech to bude, se uvádí v
parametru druhém, který je vyjádřen v milisekundách. Proto také námi získaný
časový údaj v sekundách musíme vynásobit hodnotou 1000 (1sec=1000 ms). Správně
jste pochopili, že jsme údaj zjistili metodou getElementById z HTML elementu,
identifikovaného názvem "casprodleva". Jelikož ale mohou aplikace spouštět v
různých časových intervalech souběžně více funkcí, je nutné si každý takový
proces označit. Až budeme totiž v budoucnu chtít spouštění funkce zarazit, je
pro to pak vyžadována právě její identifikace. Tu jsme si v příkladu hned ze
začátku uložili do proměnné s názvem id a jelikož chceme, aby byla tato
proměnná nejen pro vnitřní potřeby jedné funkce, ale pro všechny a svojí
hodnotu si vždy zachovávala, deklarujeme ji klíčovým slovem var vně funkcí.

Funkce spustslideshow je již o něco složitější. Nejprve si zjistíme aktuální
zvolenou položku našeho seznamu, identifikovaného jménem "zvolobr". Na začátku
dalšího řádku je uvedeno slovo if, jež určuje, že při splnění podmínky, kterou
uvádíme mezi kulaté závorky za ním, se provede příkaz, jenž zapisujeme za
podmínku v závorkách. V našem příkladu to znamená, že není-li aktuální položka
(vyjádřená vlastností value objektu "zvolobr") ještě tou poslední v našem
seznamu (tj. její pořadové číslo je menší nežli celkový počet položek, který je
obsažen ve vlastnosti length objektu "zvolobr"! Ale pozor, nezapomínejte, že
pořadová čísla jsou číslována od nuly, kdežto nejnižší celkový počet je jedna,
proto i ten dodatek "-1"), přejdeme na položku následující. Pokud ale podmínka
splněna není, není také třeba dále slide-show provozovat a tudíž se provede
příkaz za slovem else, tedy metoda clearInterval (rovněž z DOM objektu window),
která ukončí provádění naší funkce spustslideshow. Obecně pro podmíněné
vykonání příkazu můžeme napsat šablonu:

if (podmínka) příkaz; else jinýpříkaz;

Tu bychom si hezky česky mohli vyložit jako:

když (podmínka) příkaz; jinak jinýpříkaz;

Pozor: Obecně v podmínce můžeme porovnávat pomocí operátorů VĚTŠÍ, MENŠÍ a
ROVNO, k čemuž použijeme znaky ">", "<" a "==", avšak operátor ROVNO není pouze
jedním rovnítkem, ale dvěma za sebou jdoucími! Další operátory jsou pak VĚTŠÍ
ČI ROVNO ">=", MENŠÍ ČI ROVNO "<=" a NEROVNO "!=".

Funkce zastavslideshow se vyvolá jen v případě, pokud návštěvník stránky
stisknutím tlačítka k tomu určeného, sám dobrovolně ukončil provádění
slide-show. Použit je v ní jen příkaz už výše vysvětlený.

Tak, opět jsme se dostali do fáze, kdy mohu apelovat na ty, kdož mají čtení
tohoto rozsáhlého článku již dost, aby klidně časopis odložili a vrátili se k
němu třeba později, neboť již mají hotovou skutečně funkční galerii obrázků,
obohacenou dokonce o službu slide-show.



Kapitola třetí pro nejzvídavější ;)

Poslední vylepšení, které vám nabídnu, je již spíše estetického rázu, nicméně
si na něm nějakou tu novou dovednost opět jistě osvojíte. Na mnohých
profesionálně vytvořených webových stránkách jste si mohli všimnout, že je při
načítání dokumentu zobrazován i aktuální stav jeho načtení. Obvykle se tedy ve
stavové řádce webového prohlížeče vypisují hlášky typu "Načítám obrázky... 20 %
hotovo!" atd. Z funkčního hlediska takové opatření žádný obrovský přínos nemá,
ale rozhodně je to efektivní a obzvláště v našem případě tedy u galerie, kde se
může načítat velké množství objemných obrázků může být taková informace
návštěvníkovi stránek i docela prospěšná. Je tedy třeba naší skriptovou část
souboru rozšířit takto:



Objevily se nám dvě nové funkce, inicializační s pragmatickým názvem
inicializuj je první a začíná tak, že získáme objekty všech obrázků (elementů
IMG) z nám známého bloku "galerie". Nastavením jejich vlastnosti onload pak v
cyklu na řádku následujícím určíme, aby se po načtení každého jednoho obrázku
(z angl. "onload", neboli "při načtení") vyvolala naše funkce stavnacteno.
Takže až náš webový prohlížeč načte celý první obrázek galerie, spustí onu
funkci, až načte celý druhý, spustí ji znova atd. Můžete si všimnout, že
proměnnou pocobraz, kterou používáme, deklarujeme vně funkce to aby byla i po
ukončení funkce inicializuj přístupná pro tu druhou, protože bude obsahovat
počet všech obrázků v galerii, čehož ještě využijeme. Stejně tak u proměnné
aktobraz, která obsahuje číslo momentálně načteného počtu obrázků a jejíž
hodnota se při každém dalším spuštění funkce stavnacteno zvětšuje o jedničku,
bude potřeba zachovat její hodnotu i po skončení funkce, neboť se při každém
jejím dalším spuštění bude z předchozí hodnoty vždy vycházet. Když už tedy máme
počet celkových obrázků a počet momentálně načtených, není nic jednoduššího,
než tuto informaci podat návštěvníkovi stránky a to tak, že ji vypíšeme do
stavového řádku webového prohlížeče, který ovlivňujeme pomocí vlastnosti status
(v DOM jde o metodu hlavního objektu window, proto není nutné uvádět zdlouhavé
window.status). Zobrazí se pak například "NACTENO 2/5 OBRAZKU". Na řádku
následujícím ještě ošetříme situaci, kdy dojde k úplnému načtení obrázků, a již
tak není třeba vypisovat ony informace. Nastane-li tak podmínka, že počet
momentálně načtených obrázků je roven celkovému počtu všech obrázků, můžeme již
ke spokojenosti milého návštěvníka vypsat hlášku "NACTENY VSECHNY OBRAZKY".

Ke konci těla HTML na závěr ještě přidáme tento malý kousek textu, který nám
zaručí spuštění funkce inicializuj, pro nastartování ukazatele stavu načtení
dokumentu:



Další drobností, jež vám chci představit je zjednodušení ovládání funkcí
galerie. Prozatím se její běh řídí pomocí dvou tlačítek "Spust slide-show" a
"Zastav slide-show". V dnešní době se ale vše zjednodušuje a tak ani na
televizi nenajdeme zvláštní tlačítka pro její zapnutí a vypnutí, ale pouze
jedno jediné neboť zapínat věc, která je již v provozu je přece nesmysl.
Pokusme se tímto způsobem zjednodušit ovládání i naší galerie. Nejprve si opět
ukážeme, jak se změnila část HTML těla, konkrétně jakých změn doznal formulář
našeho dokumentu:




časová prodleva: sekund


Hned na první pohled jsou změny jistě evidentní ubylo jedno tlačítko a to
stávající po stisku vyvolává jinou akci funkci slideshow. Rovněž toto tlačítko
označujeme identifikátorem "zv" (od slov "Zapnout", "Vypnout"), neboť s ním
budeme později laborovat. Nyní už tedy budeme moci pochopit, změny v naší
skriptové části, které jsou tyto:



Tato část doznala na první pohled relativně velkých změn a pravdou je, že se
změnili hned tři funkce a přibyla jedna nová, nicméně změny vůbec nejsou tak
drastické, jak by se mohlo zdát však se o tom sami hned přesvědčíte. Nová
funkce slideshow, která se vyvolá po stisku tlačítka formuláře, je pouze jakýsi
prostředník pro zajištění funkcí galerie. Zjistí, jaký popis tlačítko obsahuje
pokud "Spust slide-show", pak zavolá funkci inicslideshow (která se sama již o
spuštění slide-show obrázků postará) a pokud je v popisu tlačítka text jiný
(tedy "Zastav slide-show"), pak se volá funkce zastavslideshow (která
slide-show obrázků zastaví). Ostatní funkce se změnili opravdu jen v
maličkostech inicslideshow navíc změní popis (text na něm napsaný) tlačítka
(identifikovaného jako "zv"), aby uživatel věděl, že od této chvíle už tlačítko
slouží pro účel zastavení slide-show. Zastavslideshow pak také navíc změní
popis tlačítka, které od té chvíle bude zase sloužit pro opětovné spuštění.

Vám, skalním příznivcům, co jste se prokousali článkem až sem, teď za odměnu
nabízím kýžený kompletní text souboru s galerií obrázků (obohacený o několik
málo dalších obrázků). A jak jsem se již v úvodu zmiňoval, veškeré příklady,
uváděné v dnešním dílu, můžete najít i na CD časopisu PC World a ušetřit si tak
dobu strávenou opisováním, kterou tak využijete třeba k dalšímu vylepšení
galerie. Pokud bude originální, můžete mi o tom i napsat ;). Mějte se hezky a
prozatím nashledanou!











časová prodleva: sekund





čeleď: Nymphalidae babočkovití
CENTER>



čeleď: Satyridae okáčovití




čeleď: Lycaenidae modráskovití
CENTER>



čeleď: Lycaenidae modráskovití
CENTER>



čeleď: Papilionidae otakárkovití








Na úplný závěr si dovolím uvést ukázku takové galerie:

Všechny vaše rady, náměty na další články nebo seriál, názory a prosby opět rád
uvítám na adrese j.kysela@centrum.cz.