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č
- DreamweaverJedna od gore navedenih verzija.
- Izvorna slikaPobrinite se da optimizirate ovu sliku. To će pomoći da se vaše stranice brže učitavaju.
- Slika za prevrtanjeOva 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 stranicaOvo je HTML stranica na kojoj ćete staviti svoju rollover sliku.
Započnite
- Pokrenite Dreamweaver
- Otvorite web stranicu na kojoj želite prebacivati
Umetnite objekt za prebacivanje slike
Dreamweaver olakšava stvaranje rollover slike.
- Idite na izbornik Umetanje i prema dolje na Objekti slike podizbornika.
- Odaberi Prematanje slika ili Prebacivanje slike.
Umjesto toga, neke starije verzije programa Dreamweaver nazivaju Image Objects "Interactive Images".
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 da Dreamweaver stvori vašu rollover sliku.
Dreamweaver piše JavaScript za vas
Ako otvorite stranicu u kodnom prikazu, vidjet ćete da Dreamweaver umetne blok JavaScripta u
vašeg HTML dokumenta. Ovaj blok uključuje 3 funkcije koje su vam potrebne da se slike mijenjaju kada ih miša pomiče preko njih i ako je odabrana opcija za predočavanje.
funkcija MM_swapImgRestore ()funkcija MM_findObj (n, d)funkcija MM_swapImage ()funkcija MM_preloadImages () 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)" Pogledajte potpuno funkcionalnu rollover sliku i saznajte što je Shastaov um. Dreamweaver dodaje HTML za Rollover
Isprobajte prevrtanje
