Obraz převrácení je obraz, který se změní na jiný obrázek, když vy nebo váš zákazník přejede myš nad ním. Ty se běžně používají k vytvoření interaktivního pocitu, jako jsou tlačítka nebo karty. Ale můžete vytvářet převrácené obrázky z téměř všechno.
Tento návod je navržen tak, aby vám pomohl vytvořit obrázek převrácení v aplikaci Dreamweaver. Je určen pro uživatele, kteří používají následující verze aplikace Dreamweaver:
- Dreamweaver MX
- Dreamweaver MX 2004
- Dreamweaver 8
- Dreamweaver CS3
- Dreamweaver CS4
- Dreamweaver CS5
- Dreamweaver CS6
Požadavky na tento výukový program
- DreamweaverJedna z výše uvedených verzí.
- Původní obrázekUjistěte se, že jste tento obrázek optimalizovali. To vám pomůže rychleji načíst vaše stránky.
- Obrázek převráceníTento snímek by měl mít stejné rozměry jako původní obrázek. A stejně jako původní obrázek by měly být optimalizovány, aby pomohly časům načítání stránky.
- Webová stránkaJedná se o stránku HTML, na které umístíte obrázek převrácení.
Začít
- Spusťte aplikaci Dreamweaver
- Otevřete webovou stránku, na kterou chcete převléknout
Vložte objekt Image Rollover
Aplikace Dreamweaver usnadňuje vytváření obrazu převrácení.
- Přejděte do nabídky Vložit a dolů na Obrazové objekty podmenu.
- Vybrat Převrácení obrázku nebo Převrátit obrázek.
Některé starší verze Dreamweaveru namísto toho volají Image Objects "Interactive Images".
Řekněte Dreamweaver, jaké obrázky chcete použít
Aplikace Dreamweaver zobrazí dialogové okno s políčkami, které potřebujete k vyplnění, abyste vytvořili obrázek převrácení.
Název obrázku
Vyberte název obrázku, který je pro danou stránku jedinečný. Mělo by to být jedno slovo, ale můžete použít čísla, podtržítka (_) a pomlčky (-). Toto bude použito k identifikaci obrazu, který se má změnit.
Původní obrázek
Jedná se o URL nebo umístění obrázku, které se na stránce spustí. V tomto poli můžete použít adresy URL relativní nebo absolutní cesty. Mělo by to být obrázek, který se nachází na vašem webovém serveru nebo který nahrajete se stránkou.
Převrátit obrázek
Toto je obraz, který se objeví, když myší přes obrázek. Stejně jako původní obrázek, může to být absolutní nebo relativní cesta k obrazu a měla by existovat nebo být nahrána při nahrání stránky.
Předběžný obrázek převrácení
Tato možnost je ve výchozím nastavení vybrána, protože pomáhá rychlejšímu zobrazování převrácení. Vybráním předběžného načtení obrázku převrácení webový prohlížeč jej uloží do mezipaměti, dokud se na něj nezobrazí.
Alternativní text
Dobrý alternativní text zpřístupňuje vaše obrázky. Během přidávání obrázků byste měli vždy použít jiný typ alternativního textu.
Když jste klikli, přejděte na adresu URL
Většina lidí klikne na obrázek, když uvidí jednu na stránce. Takže byste měli mít zvyk dělat je klikací. Tato volba umožňuje zadat stránku nebo adresu URL, do které se divák dostane, když kliknou na obrázek. Tato možnost se však nevyžaduje k vytvoření převrácení.
Po dokončení všech polí klikněte na OK abyste Dreamweaver vytvořili obrázek převrácení.
Dreamweaver zapíše JavaScript pro vás
Pokud otevřete stránku v zobrazení kódu, uvidíte, že aplikace Dreamweaver vloží blok JavaScript
dokumentu HTML. Tento blok obsahuje 3 funkce, které potřebujete k výměně snímků při přejíždění myší a funkci předběžného načítání, pokud jste to zvolili.
funkce MM_swapImgRestore ()funkce MM_findObj (n, d)funkce MM_swapImage ()funkce MM_preloadImages () Pokud jste se rozhodli, že aplikace Dreamweaver předem načte obrazy převrácení, uvidíte kód HTML v těle dokumentu a volat skript předběžného načtení tak, aby se obrázky rychleji načítaly. onload = "MM_preloadImages ('shasta2.jpg')" Dreamweaver také přidá veškerý kód pro váš obrázek a propojí jej (pokud jste vložili adresu URL). Část převrácení je přidána k značce kotev jako atmouseover a atmouseout atributy. onmouseout = "MM_swapImgRestore ()"onmouseover = "MM_swapImage ('Image1', '', 'shasta1.jpg', 1) Podívejte se na plně funkční obraz převrácení a zjistěte, co je na Shastově mysli. Dreamweaver přidá HTML pro převrácení
Vyzkoušejte převrácení
