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
- Dreamweaver
Jedna z výše uvedených verzí. - Původní obrázek
Ujistě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ánka
Jedná se o stránku HTML, na které umístíte obrázek převrácení.
01 z 06
Začít
- Spusťte aplikaci Dreamweaver
- Otevřete webovou stránku, na kterou chcete převléknout
02 ze dne 06
Vložte objekt Image Image Rollover
Aplikace Dreamweaver usnadňuje vytváření obrazu převrácení.
- Přejděte do nabídky Vložit a do podnabídky "Image Objects".
- Zvolte možnost "Převzetí obrázku" nebo "Převrácení obrázku"
Některé starší verze Dreamweaveru namísto toho volají Image Objects "Interactive Images".
03 ze dne 06
Ř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.
Při kliknutí, jdi 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 tlačítko OK, chcete-li aplikaci Dreamweaver vytvořit obrázek převrácení.
Na další stránce je uveden skript, který aplikace Dreamweaver píše.
04 z 06
Dreamweaver zapíše JavaScript pro vás
Pokud otevřete stránku v zobrazení kódu, uvidíte, že aplikace Dreamweaver vloží blok bloku JavaScript do
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 ()
05 ze dne 06
Dreamweaver přidá HTML pro převrácení
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)
06 z 06
Vyzkoušejte převrácení
Podívejte se na plně funkční obraz převrácení a zjistěte, co je na mysli Shasty.