Ako vytvoriť zámeny s viacerými obrázkami v Dreamweaveri

Predtým, ako začnete vytvárať zložitejší návrh stránky pomocou funkcie Zameniť obrázok v aplikácii Dreamweaver, pozrite sa na hotovú stránku. Pomocou správania Zameniť obrázok môžete nahradiť niektorý alebo všetky obrázky na stránke.

Keď použijete správanie Zameniť obrázok, je dôležité, aby všetky obrázky, ktoré budete zamieňať, mali rovnakú veľkosť (výšku a šírku). Ak obrázky nemajú rovnakú veľkosť, všetky obrázky okrem prvého sa roztiahnu alebo skomprimujú, aby sa zmestili do priestoru, ktorý zaberá prvý obrázok vložený na stránku.

Ak používate správanie Zameniť obrázok so sériou obrázkov, ktoré nemajú rovnakú výšku a šírku, máte niekoľko možností:

Väčšie orežte tak, aby všetky obrázky mali rovnakú veľkosť.

Zabezpečte, aby horizontálne a vertikálne obrázky zaberali vo vašom dizajne rovnaký priestor, a to kombináciou dvoch vertikálnych obrázkov pre každý horizontálny. Jednoducho vytvorte súbor v programe, ako je Photoshop, vložte dva zvislé obrázky do rovnakého súboru vedľa seba a potom upravte veľkosť obrázka tak, aby mal súbor rovnakú veľkosť ako jeden vodorovný obrázok.

Vytvorte jeden súbor obrázka s veľkosťou vášho najväčšieho obrázka, nastavte pozadie na neutrálnu farbu, napríklad čiernu alebo bielu, a potom vložte všetky ostatné obrázky na pozadie, aby ste ich mohli uložiť s rovnakou veľkosťou súboru.

Ak chcete použiť správanie Zameniť obrázok, postupujte podľa týchto krokov:

1 Vytvorte návrh stránky so všetkými obrázkami, ktoré chcete na začiatku zobraziť.

Každá z troch fotografií v návrhu stránky pre Tower Bridge v Londýne má dve kópie: jednu miniatúru a jednu väčšiu verziu. Keď sa stránka prvýkrát načíta vo webovom prehliadači, všetky tri miniatúry sa umiestnia na spodok stránky, pričom prvá zo zodpovedajúcich väčších verzií sa zobrazí v hlavnej oblasti tesne nad miniatúrami.

2Pomenujte svoje obrázky v inšpektorovi vlastností.

Ak chcete zacieliť svoje obrázky pomocou JavaScriptu, čo je spôsob fungovania správania, najprv priraďte každému obrázku jedinečné ID. ID obrázka nie je rovnaké ako názov súboru obrázka alebo textová značka, aj keď môžete použiť rovnaké alebo podobné názvy. ID obrázkov by nemali obsahovať medzery ani žiadne špeciálne znaky.

3Vyberte Okno→Správanie.

Otvorí sa panel Behaviors. Panel Behaviors môžete presunúť na iné miesto na stránke a môžete ho rozbaliť potiahnutím za jeho spodok alebo stranu. Môžete tiež chcieť zatvoriť všetky ostatné otvorené panely, aby ste získali viac miesta, kliknutím na tmavosivú lištu v hornej časti ľubovoľného panela.

4Vyberte obrázok.

Vyberte obrázok na stránke, ktorý bude slúžiť ako spúšťač akcie.

5 Zvoľte správanie Zameniť obrázok.

S obrázkom spúšťača vybratým v pracovnom priestore kliknite na znamienko plus na paneli Správanie, aby ste otvorili rozbaľovací zoznam akcií a vyberte akciu, ktorú chcete použiť.

6V dialógovom okne Zameniť obrázok zadajte obrázky, ktoré chcete vymeniť.

V zozname Obrázky vyberte ID obrázka, ktorý bude nahradený. Kliknutím na tlačidlo Prehľadávať vyberte obrázok, ktorý nahradí hlavný obrázok. Ak obrázok ešte nie je uložený v priečinku lokálnej lokality, Dreamweaver vám ponúkne, že ho tam skopírujete.

7V spodnej časti dialógového okna Zameniť obrázok vyberte možnosť Predbežne načítať obrázky, aby ste dali prehliadaču pokyn, aby pri načítaní stránky načítal všetky obrázky do vyrovnávacej pamäte.

Ak túto možnosť nevyberiete, pri použití výmeny obrázkov môže dôjsť k oneskoreniu.

8Ak chcete, zrušte výber možnosti Restore Images OnMouseOut.

Možnosť Restore Images OnMouseOut znamená, že po dokončení udalosti (napríklad keď sa myš presunie mimo spúšťacej miniatúry), pôvodný obrázok sa nahradí. V predvolenom nastavení Dreamweaver vopred vyberie túto možnosť pre správanie Zameniť obrázok. Možno budete chcieť zrušiť výber tejto možnosti, ak zistíte, že nahradenie pôvodného obrázka pri každom prejdení kurzorom na inú miniatúru pôsobí rušivo.

9Po zadaní všetkých nastavení správania kliknite na tlačidlo OK.

Nové správanie sa zobrazí na paneli Správanie.

10Uveďte udalosť pre správanie.

Po použití akcie sa môžete vrátiť späť a určiť, ktorá udalosť spustí akciu. V predvolenom nastavení Dreamweaver použije udalosť OnMouseOver, keď použijete akciu Zameniť obrázok, ale túto udalosť môžete zmeniť na akúkoľvek dostupnú, napríklad OnClick, čo vyžaduje, aby používateľ klikol na obrázok, aby sa spustila akcia Zameniť obrázok.

11Použite ďalšie spôsoby správania.

Ak chcete použiť správanie Zameniť obrázok na iné obrázky na stránke, zopakujte kroky 5–10, kliknutím vyberte obrázok, ktorý chcete použiť ako spúšťač, a potom zadajte zodpovedajúci obrázok, ktorý sa má vymeniť.

12Otestujte si svoju prácu v prehliadači.

Účinky správania, ako je toto, neuvidíte, kým nekliknete na tlačidlo Živé zobrazenie v ľavom hornom rohu pracovného priestoru v Dreamweaveri alebo nezobrazíte ukážku stránky vo webovom prehliadači.