Ako vytvoriť obrázok prevrátenia v programe Dreamweaver

Obrázok prevrátenia je obrázok, ktorý sa zmení na iný obrázok, keď vy alebo váš zákazník posuniete myš nad ním. Tieto sú bežne používané na vytvorenie interaktívneho pocitu, ako sú tlačidlá alebo karty. Môžete však vytvoriť obrázky prevrátenia z takmer čokoľvek.

Tento návod je navrhnutý tak, aby vám pomohol vytvoriť obrázok prevrátenia v aplikácii Dreamweaver . Je určený pre použitie ľuďmi používajúcimi nasledujúce verzie programu Dreamweaver:

Požiadavky na tento výcvik

01 z 06

Začať

Shasta image rollover example. Foto © 2001-2012 J Kyrnin - obrázok licencovaný na 6gm.com
  1. Spustite program Dreamweaver
  2. Otvorte webovú stránku, na ktorej chcete prejsť

02 z 06

Vložte objekt prevrátenia obrazu

Vložiť objekt obrázku. Snímka obrazovky J Kyrnina

Program Dreamweaver uľahčuje vytváranie obrazu prevrátenia.

  1. Prejdite do ponuky Vložiť a dole do podmenu "Obrazové objekty".
  2. Zvoľte možnosť "Prevrátenie obrazu" alebo "Prevrátiť obrázok"

Niektoré staršie verzie programu Dreamweaver volajú namiesto toho obrazové objekty "Interaktívne obrázky".

03 z 06

Povedzte aplikácii Dreamweaver, aké obrázky chcete používať

Vyplňte sprievodcu. Snímka obrazovky J Kyrnina

Aplikácia Dreamweaver objaví dialógové okno s políčkami, ktoré musíte vyplniť, aby ste vytvorili obrázok prevrátenia.

Názov obrázku

Vyberte názov obrázka, ktorý je jedinečný pre danú stránku. Mala by to byť jedno slovo, ale môžete použiť čísla, podčiarknuté znaky (_) a pomlčky (-). Toto sa použije na identifikáciu obrazu, ktorý sa má zmeniť.

Pôvodný obrázok

Toto je adresa URL alebo umiestnenie obrázka, ktoré začnú na stránke. V tomto poli môžete použiť adresy URL relatívnej alebo absolútnej cesty . Mal by to byť obraz, ktorý sa nachádza na vašom webovom serveri, alebo ktorý nahrajete so stránkou.

Prevrátiť obrázok

Toto je obrázok, ktorý sa zobrazí, keď myšou nad obrázkom. Rovnako ako pôvodný obrázok, môže to byť absolútna alebo relatívna cesta k obrázku a mala by existovať alebo byť nahraná pri odovzdávaní stránky.

Preload Image Rollover

Táto možnosť je v predvolenom nastavení vybratá, pretože pomáha rýchlejšie zobrazovať rollover. Výberom predbežného načítania obrazu prevrátenia webový prehliadač ho uloží do vyrovnávacej pamäte, až kým sa myš neprekročí.

Alternatívny text

Dobrý alternatívny text zvyšuje prístupnosť vašich obrázkov. Pri pridávaní akýchkoľvek obrázkov by ste mali používať vždy alternatívny text.

Keď kliknete, prejdite na adresu URL

Väčšina ľudí klikne na obrázok, keď uvidí jednu na stránke. Takže by ste mali mať zvyk robiť ich klikací. Táto možnosť vám umožňuje určiť stránku alebo webovú adresu, ktorou sa divák dostane, keď kliknú na obrázok. Táto možnosť sa však nevyžaduje na vytvorenie prevrátenia.

Po dokončení všetkých polí kliknite na tlačidlo OK, ak chcete, aby program Dreamweaver vytvoril obrázok prevrátenia.

Nasledujúca stránka zobrazuje skript, ktorý píše Dreamweaver.

04 z 06

Dreamweaver zapíše JavaScript pre vás

JavaScript. Snímka obrazovky J Kyrnina

Ak otvoríte stránku v zobrazení kódu, uvidíte, že Dreamweaver vloží blok bloku JavaScript do dokumentu HTML. Tento blok obsahuje 3 funkcie, ktoré potrebujete na to, aby sa obrázky vymenili pri prechode myšou a funkcii predbežného načítania, ak ste si to zvolili.

funkcia MM_swapImgRestore ()
funkcia MM_findObj (n, d)
funkcia MM_swapImage ()
funkcia MM_preloadImages ()

05 z 06

Dreamweaver pridá HTML pre rollover

HTML. Snímka obrazovky J Kyrnina

Ak ste sa rozhodli, že aplikácia Dreamweaver predinštaluje obrázky prevráteného textu, uvidíte kód HTML v tele dokumentu, aby ste zavolali predbežný skript, aby sa obrázky rýchlejšie načítavali.

onLoad = "MM_preloadImages ( 'shasta2.jpg')"

Dreamweaver tiež pridá celý kód pre váš obrázok a spája ho (ak ste vložili adresu URL). Časť prevrátenia sa pridá k značke kotvy ako atmouseover a onmouseout atribúty.

onmouseout = "MM_swapImgRestore ()"
onmouseover = "MM_swapImage ( 'Image1', '', 'shasta1.jpg', 1)"

06 z 06

Vyskúšajte rollover

Shasta image rollover example. Foto © 2001-2012 J Kyrnin - obrázok licencovaný na 6gm.com

Pozrite sa na plne funkčný obraz prevrátenia a dozviete sa, čo je na hlave Shasty.