Jak vytvořit jednoduchý obrázek s přechodem v Dreamweaveru

Rollovery jsou tak populární funkcí, že Dreamweaver obsahuje speciální dialogové okno pouze pro rollovery: dialogové okno Vložit obrázek s efektem rolloveru. Obrázky převrácení, jak název napovídá, jsou 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 mění barva slova.

Pomocí možnosti Zaměnit obraz z panelu Chování můžete vytvořit složitější efekty obrazu při přechodu. Možnost Zaměnit obrázek umožňuje změnit více obrázků současně.

Chcete-li vytvořit jednoduchý efekt rolloveru se dvěma obrazy pomocí dialogového okna Vložit obrázek Rollover aplikace Dreamweaver, postupujte takto:

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ě uvidíte podivné efekty změny měřítka, protože oba obrázky musí být zobrazeny přesně ve stejném prostoru na stránce.

Vyberte Vložit → Obrázek → Obrázek převrácení.

Případně můžete použít rozevírací seznam dostupný z ikony Obrázky na panelu Společné vkládání a vybrat Obrázek při převrácení.

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

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.

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

Pokud obrázky ještě nejsou ve složce místního webu, Dreamweaver je zkopíruje do vašeho webu, když vytvoříte přechod.

Do pole Obrázek převrácení zadejte obrázek, který chcete zviditelnit, když návštěvník přesune kurzor na první obrázek.

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

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

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 kurzor nepřejede přes původní obrázek.

Do pole Alternativní text zadejte popis obrázků.

Alternativní text je volitelný, ale doporučený, protože použití klíčových slov může zlepšit optimalizaci pro vyhledávače. Podobně je alternativní text klíčovou součástí přístupnosti webu, protože tento text čtou nahlas speciální prohlížeče zvané čtečky obrazovky, které používají nevidomí a další osoby s omezeným zrakem nebo pohyblivostí. Alternativní text se v prohlížeči zobrazí pouze v případě, že obrázky nejsou viditelné.

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 URL, Dreamweaver automaticky vloží znak # jako zástupný symbol do kódu.

Znak # je běžná technika pro vytváření odkazů, které nikam neodkazují. Protože rollover obrázky, které neodkazují na jinou stránku, mají mnoho skvělých využití, je tato technika užitečná. Jen si pamatujte, že pokud chcete, aby váš rollover odkazoval, musíte nahradit znak # odkazem na jinou stránku.

Klepněte na tlačítko OK.

Obrázky jsou automaticky nastaveny jako rollover.

Chcete-li vidět rollover v akci, uložte soubor a poté klikněte na ikonu zeměkoule v horní části pracovní plochy, abyste zobrazili náhled stránky ve webovém prohlížeči.

Jak funguje přechod myší, můžete vidět v zobrazení Návrh v aplikaci Dreamweaver nebo pomocí možnosti Živé zobrazení. Když kliknete na tlačítko Živě v levé horní části pracovní plochy, v podstatě změníte Dreamweaver na webový prohlížeč, který zobrazuje stránky podobně jako prohlížeč Chrome.

Když na počítači zobrazujete náhled stránky, která obsahuje obrázek při přechodu, některé webové prohlížeče zobrazí upozornění, že musíte povolit zobrazení stránky ovládacím prvkům ActiveX. Toto je bezpečnostní varování, které se zobrazí pouze při otevření stránky na stejném počítači, kde je stránka uložena.

Pokud stránku publikujete na webový server a poté ji zobrazíte přes internetové připojení, vy ani návštěvníci vašeho webu tuto chybu neuvidíte.

Kredit: Artwork by istockphoto.com