Ako vytvoriť jednoduchý rollover obrázok v Dreamweaveri

Rollovery sú tak populárnou funkciou, že Dreamweaver obsahuje špeciálne dialógové okno určené len pre rollovery: dialógové okno Insert Rollover Image. Obrázky prevrátenia, ako už názov napovedá, sú 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 mení farba slova.

Pomocou možnosti Zameniť obrázok na paneli Správanie môžete vytvoriť zložitejšie efekty prevrátenia obrázka. Možnosť Zameniť obrázok vám umožňuje zmeniť viacero obrázkov súčasne.

Ak chcete vytvoriť jednoduchý efekt prechodu pomocou dvoch obrázkov pomocou dialógového okna Vložiť prevrátenie obrázka v aplikácii Dreamweaver, postupujte podľa týchto krokov:

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 uvidíte zvláštne efekty zmeny mierky, pretože oba obrázky musia byť zobrazené v presne rovnakom priestore na stránke.

Vyberte Vložiť → Obrázok → Obrázok prevrátenia.

Prípadne môžete použiť rozbaľovací zoznam dostupný z ikony Obrázky na paneli Bežné vkladanie a vybrať Obrázok s rolovaním.

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

V poli Názov obrázka zadajte názov obrázka.

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.

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ú vo vašej lokálnej zložke lokality, Dreamweaver ich pri vytváraní prechodu skopíruje na vašu lokalitu.

Do poľa Rollover Image zadajte obrázok, ktorý chcete, aby sa stal viditeľným, keď návštevník presunie kurzor na prvý obrázok.

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

Začiarknutím políčka Preload Rollover Image načítate všetky obrázky rollover do vyrovnávacej pamäte prehliadača pri prvom načítaní stránky.

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 nad pôvodný obrázok.

Do poľa Alternatívny text zadajte popis obrázkov.

Alternatívny text je voliteľný, ale odporúča sa, pretože použitie kľúčových slov môže zlepšiť optimalizáciu pre vyhľadávače. Podobne aj alternatívny text je kľúčovou súčasťou dostupnosti webu, pretože tento text čítajú nahlas špeciálne prehliadače nazývané čítačky obrazovky, ktoré používajú nevidomí a iní ľudia s obmedzeným zrakom alebo pohyblivosťou. Alternatívny text sa zobrazí iba v prehliadači, ak obrázky nie sú viditeľné.

Do poľa Po kliknutí prejdite na adresu URL zadajte ľubovoľnú webovú adresu alebo vyhľadajte inú stránku na lokalite, na ktorú chcete vytvoriť prepojenie.

Ak nešpecifikujete URL, Dreamweaver automaticky vloží znak # ako zástupný symbol do kódu.

Znak # je bežná technika vytvárania odkazov, ktoré nikam neodkazujú. Pretože obrázky pri prechode myšou, ktoré neodkazujú na inú stránku, majú mnoho skvelých využití, táto technika je užitočná. Len si pamätajte, že ak chcete, aby váš prechod odkazoval, musíte nahradiť znak # odkazom na inú stránku.

Kliknite na tlačidlo OK.

Obrázky sa nastavia automaticky ako rollover.

Ak chcete vidieť rolovanie v akcii, uložte súbor a potom kliknite na ikonu zemegule v hornej časti pracovného priestoru, čím zobrazíte ukážku stránky vo webovom prehliadači.

Ako funguje prechod myšou, môžete vidieť v zobrazení Návrh v aplikácii Dreamweaver alebo pomocou možnosti Živé zobrazenie. Keď kliknete na tlačidlo Live v ľavej hornej časti pracovného priestoru, v podstate zmeníte Dreamweaver na webový prehliadač, ktorý zobrazuje stránky podobne ako prehliadač Chrome.

Keď na počítači zobrazujete ukážku stránky, ktorá obsahuje obrázok pri prechode kurzorom, niektoré webové prehliadače zobrazia upozornenie, že musíte povoliť zobrazenie stránky ovládacím prvkom ActiveX. Toto je bezpečnostné varovanie, ktoré sa zobrazí iba vtedy, keď je stránka otvorená na tom istom počítači, kde je stránka uložená.

Ak zverejníte stránku na webovom serveri a potom ju zobrazíte cez internetové pripojenie, vy ani návštevníci vašej lokality neuvidíte túto chybu.

Kredit: Umelecké dielo od istockphoto.com