Zamjena je slika koja se mijenja na neku drugu sliku kada vi ili vaš klijent zakrečete miš iznad nje. Obično se koriste za stvaranje interaktivnog osjećaja poput gumba ili kartica. No, možete stvoriti rollover slike iz pravedan o išta.
Ovaj vodič osmišljen je kako bi vam pomogao u stvaranju slike preokreta u Dreamweaveru . Namijenjen je korisnicima koji upotrebljavaju sljedeće verzije programa Dreamweaver:
- Dreamweaver MX
- Dreamweaver MX 2004
- Dreamweaver 8
- Dreamweaver CS3
- Dreamweaver CS4
- Dreamweaver CS5
- Dreamweaver CS6
Zahtjevi za ovaj vodič
- Dreamweaver
Jedna od gore navedenih verzija. - Izvorna slika
Pobrinite se da optimizirate ovu sliku. To će pomoći da se vaše stranice brže učitavaju. - Slika za prevrtanje
Ova bi slika trebala biti iste dimenzije kao i izvorna slika. I, kao izvorna slika, treba optimizirati kako bi se pomoglo u učitavanju stranice. - Web stranica
Ovo je HTML stranica na kojoj ćete staviti svoju rollover sliku.
01 od 06
Započnite
- Pokrenite Dreamweaver
- Otvorite web stranicu na kojoj želite prebacivati
02 od 06
Umetnite objekt za sliku za prevrtanje
Dreamweaver olakšava stvaranje rollover slike.
- Idite na izbornik Umetanje i prema dolje do podizbornika "Objekti predmeta".
- Odaberite "Zamjena slika" ili "Prekoračena slika"
Umjesto toga, neke starije verzije programa Dreamweaver nazivaju Image Objects "Interactive Images".
03 od 06
Recite Dreamweaver Koje slike koriste
Dreamweaver pops dijaloški okvir s polja koja je potrebno ispuniti kako bi stvorili svoju rollover sliku.
Naziv slike
Odaberite naziv slike koji je jedinstven za tu stranicu. To bi trebalo biti samo jedna riječ, ali možete koristiti brojeve, podvlake (_) i crtice (-). Ovo će se koristiti za prepoznavanje slike koju treba mijenjati.
Izvorna slika
Ovo je URL ili mjesto slike koja će započeti na stranici. U ovom polju možete upotrebljavati relativne ili apsolutne URL- ove. Ovo bi trebalo biti slika koja postoji na vašem web poslužitelju ili koju ćete prenijeti s tom stranicom.
Prebacivanje slike
Ovo je slika koja će se pojaviti kada kliknete miš iznad slike. Baš kao i izvorna slika, to može biti apsolutna ili relativna putanja do slike, a ona bi trebala postojati ili biti prenesena prilikom prijenosa stranice.
Prethodno učitavanje rollover slike
Ova je opcija odabrana prema zadanim postavkama jer pomaže da se rollover brže pojavljuje. Odabirom da se preloadira slika za prevrtanje, web preglednik će je pohraniti u predmemoriju sve dok miš ne prevrne.
Alternativni tekst
Dobar alternativni tekst čini vaše slike dostupnijim. Uvijek dodajte neku vrstu alternativnog teksta prilikom dodavanja bilo koje slike.
Kada kliknete, idite na URL
Većina ljudi klikne na sliku kada ih vidi na stranici. Zato biste trebali imati naviku da ih možete kliknuti. Ova vam opcija omogućuje da odredite stranicu ili URL koji će gledatelja povesti kada kliknu na sliku. No, ova opcija nije potrebna za izradu rollovera.
Kada dovršite sva polja, kliknite U redu kako bi Dreamweaver stvorio vašu rollover sliku.
Sljedeća stranica prikazuje skriptu koju Dreamweaver piše.
04 od 06
Dreamweaver piše JavaScript za vas
Ako otvorite stranicu u kodnom prikazu, vidjet ćete da Dreamweaver umetne blok JavaScripta u
funkcija MM_swapImgRestore ()
funkcija MM_findObj (n, d)
funkcija MM_swapImage ()
funkcija MM_preloadImages ()
05 od 06
Dreamweaver dodaje HTML za Rollover
Ako ste odabrali da je Dreamweaver unaprijed učitao rollover slike, vidjet ćete HTML kôd u tijelu vašeg dokumenta da biste pozvali skriptu predajanja kako bi se vaše slike brže učitale.
onLoad = "MM_preloadImages ( 'shasta2.jpg')"
Dreamweaver također dodaje sav kod za vašu sliku i povezuje ga (ako ste uključili URL). Dio za prevrtanje dodaje se u sidrenu oznaku kao atribute onmouseover i onmouseout.
onmouseout = "MM_swapImgRestore ()"
onmouseover = "MM_swapImage ( 'Slika1', '', 'shasta1.jpg', 1)"
06 od 06
Isprobajte prevrtanje
Pogledajte potpuno funkcionalnu rollover sliku i saznajte što je na Shastaovom umu.