Vytvorenie obrázka prevrátenia v aplikácii Dreamweaver CS3

V Dreamweaveri sú obrázky s rolovaním – ako už názov napovedá – navrhnuté tak, aby reagovali, keď niekto prejde kurzorom po obrázku. Efekt môže byť taký dramatický, ako keď je obrázok psa nahradený obrázkom leva, alebo taký jemný, ako keď sa farba slova mení, keď jeden obrázok nahrádza druhý. Tak či onak, Dreamweaver obsahuje špeciálne dialógové okno pre rollovery, vďaka ktorým je vytvorenie jednoduchého efektu rolloveru jedným z najjednoduchších spôsobov použitia.

Ak chcete vytvoriť obrázok rollover pomocou dialógového okna Vložiť obrázok rollover aplikácie Dreamweaver, postupujte podľa týchto krokov:

1. Kliknutím umiestnite kurzor na stránku, kde sa má zobraziť rolovanie.

Efekty rolloveru vyžadujú aspoň dva obrázky: jeden pre počiatočný stav a jeden pre stav rolloveru. Môžete použiť dva rôzne obrázky alebo dva podobné, ale oba by mali mať rovnaké rozmery. V opačnom prípade získate zvláštne efekty zmeny mierky, pretože obidva obrázky musia byť zobrazené v presne rovnakom priestore na stránke.

2. Zvoľte Vložiť –> Objekty obrázka –> Obrázok s rolovaním.

Zobrazí sa dialógové okno Vložiť obrázok s rolovaním.

3. V poli Názov obrázku pomenujte obrázok.

Predtým, ako budete môcť použiť správanie na prvok, ako je napríklad obrázok, prvok musí mať názov, aby naň mohol skript správania odkazovať. Prvky môžete pomenovať akokoľvek, pokiaľ nepoužívate medzery ani špeciálne znaky.

4. V poli Pôvodný obrázok zadajte prvý obrázok, ktorý chcete zobraziť. Pomocou tlačidla Prehľadávať vyhľadajte a vyberte obrázok.

Ak sa obrázky ešte nenachádzajú v koreňovom priečinku vašej lokality, Dreamweaver ich skopíruje na vašu lokalitu, keď vytvoríte prechod.

5. Do poľa Rollover Image zadajte obrázok, ktorý chcete, aby bol viditeľný, keď návštevníci presunú kurzor na prvý obrázok.

Opäť môžete použiť tlačidlo Prehľadávať na vyhľadanie a výber obrázka.

6. Označte začiarkavacie políčko Preload Rollover Image, aby sa pri prvom načítaní stránky načítali všetky obrázky rollover do vyrovnávacej pamäte prehliadača.

Ak sa nerozhodnete urobiť tento krok, vaši návštevníci môžu zaznamenať oneskorenie, pretože druhý obrázok sa stiahne až po umiestnení kurzora myši na pôvodný obrázok.

7. V poli Po kliknutí prejdite na adresu URL zadajte ľubovoľnú webovú adresu alebo prejdite na ďalšiu stránku na lokalite, na ktorú chcete vytvoriť prepojenie.

Ak nezadáte adresu URL, Dreamweaver automaticky vloží znak # ako zástupný znak.

8. Kliknite na tlačidlo OK.

Obrázky sa automaticky nastavia ako rollover.

9. Kliknutím na ikonu zemegule v hornej časti pracovného priestoru zobrazíte ukážku svojej práce v prehliadači a otestujete, ako funguje rollover.