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:
- Dreamweaver MX
- Dreamweaver MX 2004
- Dreamweaver 8
- Dreamweaver CS3
- Dreamweaver CS4
- Dreamweaver CS5
- Dreamweaver CS6
Požiadavky na tento výcvik
- Dreamweaver
Jedna z verzií uvedených vyššie. - Originálny obrázok
Uistite sa, že tento obrázok optimalizujete. To vám pomôže načítať stránky rýchlejšie. - Obrázok prevrátenia
Tento obrázok by mal mať rovnaké rozmery ako pôvodný obrázok. A ako pôvodný obrázok, mali by byť optimalizované, aby pomohli časom načítania stránky. - Webová stránka
Toto je stránka HTML, na ktorej umiestnite obrázok prevrátenia.
01 z 06
Začať
- Spustite program Dreamweaver
- Otvorte webovú stránku, na ktorej chcete prejsť
02 z 06
Vložte objekt prevrátenia obrazu
Program Dreamweaver uľahčuje vytváranie obrazu prevrátenia.
- Prejdite do ponuky Vložiť a dole do podmenu "Obrazové objekty".
- 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ť
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
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
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
Pozrite sa na plne funkčný obraz prevrátenia a dozviete sa, čo je na hlave Shasty.