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:
- Dreamweaver MX
- Dreamweaver MX 2004
- Dreamweaver 8
- Dreamweaver CS3
- Dreamweaver CS4
- Dreamweaver CS5
- Dreamweaver CS6
Zahtjevi za ovaj priručnik
- Dreamweaver
Jedna od gore navedenih verzija. - Originalna slika
Pobrinite se da optimizujete ovu sliku. Ovo će vam pomoći da stranice učitavaju brže. - Slika rollovera
Ova slika bi trebala biti iste dimenzije kao i originalna slika. I, kao i originalna slika, trebalo bi da bude optimizovana kako bi pomogla vremenu učitavanja stranica. - Web stranica
Ovo je HTML stranica na koju ćete staviti svoju sliku sa prevrtanjem.
01 od 06
Počnite
- Pokrenite Dreamweaver
- Otvorite web stranicu na kojoj želite svoj prevrtač
02 od 06
Ubacite objekat slike sa prevračanjem slike
Dreamweaver olakšava kreiranje slike rollovera.
- Idite u meni Insert i do podmenija "Image Objects".
- 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
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
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
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
Pogledajte potpuno funkcionalnu sliku rollovera i saznajte šta je u Shastaovom umu.