Kako kreirati sliku u Dreamweaver-u

Slika rollovera je slika koja se menja na neku drugu sliku kada vi ili vaši klijenti prebacite miš preko njega. Ovi se obično koriste za stvaranje interaktivnog osećaja kao što su gumbi ili tabulatori. Ali možete kreirati slike sa prevrnutosti iz svega.

Ovaj tutorijal je dizajniran da vam pomogne da kreirate sliku rollovera u Dreamweaver-u . Namijenjen je za korištenje od strane ljudi koji koriste sljedeće verzije Dreamweaver-a:

Zahtjevi za ovaj priručnik

01 od 06

Počnite

Primer Shala rollover slike. Foto © 2001-2012 J Kyrnin - slika koja je licencirana za About.com
  1. Pokrenite Dreamweaver
  2. Otvorite web stranicu na kojoj želite svoj prevrtač

02 od 06

Ubacite objekat slike sa prevračanjem slike

Ubacite sliku objekta. Snimak ekrana J Kyrnin

Dreamweaver olakšava kreiranje slike rollovera.

  1. Idite u meni Insert i do podmenija "Image Objects".
  2. Izaberite opciju "Image rollover" ili "Rollover image"

Neke starije verzije Dreamweaver-a nazivaju Image Objects "Interactive Images".

03 od 06

Recite Dreamweaveru koje slike koristiti

Popunite Čarobnjaka. Snimak ekrana J Kyrnin

Dreamweaver pokreće dijalog box sa poljima koje trebate popuniti kako biste kreirali svoju sliku rollovera.

Ime slike

Izaberite ime slike koje je jedinstveno za stranicu. Trebalo bi da bude samo jedna reč, ali možete koristiti brojeve, podvučice (_) i crtice (-). Ovo će se koristiti za identifikaciju slike koja se menja.

Originalna slika

Ovo je URL ili lokacija slike koja će početi na stranici. U ovom polju možete koristiti relativne ili apsolutne URL adrese putanja . Ovo bi trebala biti slika koja postoji na vašem web serveru ili koju ćete poslati sa stranice.

Rollover Image

Ovo je slika koja će se pojaviti kada prođete mišem preko slike. Kao i originalna slika, ovo može biti apsolutna ili relativna putanja do slike, i ona bi trebala postojati ili biti otpremljena prilikom učitavanja stranice.

Preload slika preusmeravanja

Ova opcija je podrazumevano izabrana zato što pomaže da se rollover pojavi brže. Izborom unapred učitavanja slike rollovera, Web pretraživač će ga čuvati u kešu dok se miš ne pređe preko njega.

Alternativni tekst

Dobar alternativni tekst čini vaše slike dostupnijim. Kad dodate slike, uvek koristite neku vrstu alternativnog teksta.

Kada kliknete, idite na URL

Većina ljudi će kliknuti na sliku kada vide jednu na stranici. Dakle, trebalo bi da imate naviku da ih učinite kliznim. Ova opcija vam omogućava da navedete stranicu ili URL adresu kako biste pogledali posmatrača kada kliknu na sliku. Ali ova opcija nije neophodna za kreiranje prevrtanja.

Kada završite sva polja, kliknite na dugme U redu da biste Dreamweaver kreirali sliku rollovera.

Sledeća stranica prikazuje skriptu koju piše Dreamweaver.

04 od 06

Dreamweaver piše JavaScript za vas

JavaScript. Snimak ekrana J Kyrnin

Ako otvorite stranicu u kodnom prikazu, videćete da Dreamweaver ubacuje blok JavaScripta u vašeg HTML dokumenta. Ovaj blok uključuje 3 funkcije koje trebate imati razmjene slika kada se miš prekriće preko njih i funkcija preload ako ste se odlučili za to.

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

05 od 06

Dreamweaver dodaje HTML za Rollover

HTML. Snimak ekrana J Kyrnin

Ako ste izabrali da Dreamweaver učitava slike rollovera, onda ćete videti HTML kod u telu vašeg dokumenta da biste pozvali skriptu za preload tako da se vaše slike brzo učitavaju.

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

Dreamweaver dodaje i sve šifre za vašu sliku i povezuje ga (ukoliko ste uključili URL adresu). Dio rollovera se dodaje sidrenoj oznaci kao onmouseover i atmouseout atribute.

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

06 od 06

Ispitajte Rollover

Primer Shala rollover slike. Foto © 2001-2012 J Kyrnin - slika koja je licencirana za About.com

Pogledajte potpuno funkcionalnu sliku rollovera i saznajte šta je u Shastaovom umu.