Vytvoření obrázku s přechodem v aplikaci Dreamweaver CS3

V Dreamweaveru jsou obrázky při najetí myší – jak název napovídá – navrženy tak, aby reagovaly, když někdo přejede kurzorem přes obrázek. Efekt může být tak dramatický, jako když je obrázek psa nahrazen obrázkem lva, nebo tak jemný, jako když se barva slova mění, když jeden obrázek nahrazuje jiný. Ať tak či onak, Dreamweaver obsahuje speciální dialogové okno pro rollovery, díky kterému je vytvoření jednoduchého efektu rolloveru jedním z nejjednodušších způsobů použití.

Chcete-li vytvořit obrázek s přechodem pomocí dialogového okna Vložit obrázek při přechodu v aplikaci Dreamweaver, postupujte takto:

1. Klepnutím umístěte kurzor na stránku, kde se má zobrazit rollover.

Efekty rolloveru vyžadují alespoň dva obrazy: jeden pro počáteční stav a jeden pro stav rolloveru. Můžete použít dva různé obrázky nebo dva podobné, ale oba by měly mít stejné rozměry. V opačném případě získáte podivné efekty změny měřítka, protože oba obrázky musí být zobrazeny přesně na stejném místě na stránce.

2. Zvolte Vložit –> Objekty obrázku –> Obrázek s rolloverem.

Zobrazí se dialogové okno Vložit obrázek převrácení.

3. V poli Název obrázku pojmenujte obrázek.

Než budete moci použít chování na prvek, jako je obrázek, musí mít prvek název, aby na něj mohl skript chování odkazovat. Prvky můžete pojmenovat jakkoli, pokud nepoužíváte mezery nebo speciální znaky.

4. V poli Původní obrázek určete první obrázek, který chcete zobrazit. Pomocí tlačítka Procházet vyhledejte a vyberte obrázek.

Pokud obrázky ještě nejsou v kořenové složce vašeho webu, Dreamweaver je zkopíruje do vašeho webu, když vytvoříte přechod.

5. Do pole Rollover Image zadejte obrázek, který chcete zviditelnit, když návštěvníci přesunou kurzor na první obrázek.

Opět můžete použít tlačítko Procházet k vyhledání a výběru obrázku.

6. Zaškrtněte políčko Preload Rollover Image, chcete-li při prvním načtení stránky načíst všechny obrázky rollover do mezipaměti prohlížeče.

Pokud se nerozhodnete tento krok provést, mohou vaši návštěvníci zaznamenat zpoždění, protože druhý obrázek nebude stažen, dokud nepřejedete myší přes původní obrázek.

7. Do pole Po kliknutí přejděte na adresu URL zadejte libovolnou webovou adresu nebo procházením vyhledejte další stránku na svém webu, na kterou chcete odkazovat.

Pokud neurčíte adresu URL, Dreamweaver automaticky vloží znak # jako zástupný znak.

8. Klepněte na tlačítko OK.

Obrázky jsou automaticky nastaveny jako rollover.

9. Klepnutím na ikonu zeměkoule v horní části pracovní plochy zobrazíte náhled své práce v prohlížeči a vyzkoušejte, jak funguje rollover.