Slika rolloverja je slika, ki se spremeni v drugo sliko, ko vi ali vaš uporabnik z njo premaknete miško. Ti se pogosto uporabljajo za ustvarjanje interaktivnega občutka, kot so gumbe ali zavihki. Ampak lahko ustvarite slike rollover iz skoraj nič.
Ta vaja je zasnovana tako, da vam pomaga ustvariti sliko rollov v Dreamweaverju . Namenjen je uporabi oseb, ki uporabljajo naslednje različice Dreamweaverja:
- Dreamweaver MX
- Dreamweaver MX 2004
- Dreamweaver 8
- Dreamweaver CS3
- Dreamweaver CS4
- Dreamweaver CS5
- Dreamweaver CS6
Zahteve za ta vadnica
- Dreamweaver
Ena od zgoraj navedenih različic. - Izvirna slika
Poskrbite, da boste to sliko optimizirali. S tem bodo vaše strani hitreje obremenjene. - Slika rolloverja
Ta slika mora biti enake dimenzije kot izvirna slika. In, tako kot izvirna slika, je treba optimizirati, da pomagajo časom nalaganja strani. - Spletna stran
To je stran HTML, kjer boste postavili svojo sliko rolloverja.
01 od 06
Začeti
- Začni Dreamweaver
- Odprite spletno stran, kjer želite rolover
02 od 06
Vstavite objekt slike s prevračanjem slike
Dreamweaver olajša ustvarjanje slike rolloverja.
- Pojdite v meni »Vstavi« in v podmenij »Podoba slik«.
- Izberite "Image rollover" ali "Rollover image"
Nekatere starejše različice Dreamweaverja namesto "Interaktivne slike" pokličejo "Image Objects".
03 od 06
Povejte Dreamweaver, kakšne naj bodo fotografije
Dreamweaver popije pogovorno okno s polji, ki jih morate izpolniti, da ustvarite svojo sliko rolloverja.
Ime slike
Izberite ime slike, ki je edinstveno za stran. Vsekakor mora biti ena beseda, vendar lahko uporabite številke, podčrtaj (_) in vezaje (-). To se bo uporabilo za identifikacijo slike, ki jo želite spremeniti.
Izvorna slika
To je URL ali lokacija slike, ki se bo začela na strani. V tem polju lahko uporabite relativne ali absolutne URL-je poti . To bi morala biti slika, ki obstaja na vašem spletnem strežniku ali ki jo boste naložili s stranjo.
Previjalna slika
To je slika, ki se prikaže z miško nad sliko. Tako kot izvirna slika je to lahko absolutna ali relativna pot do slike in bi morala obstajati ali biti naložena, ko naložite stran.
Preload Preobremenitvena slika
Ta možnost je privzeto izbrana, ker omogoča hitrejše prikazovanje prevračanja. Z izbiro predobremenitve slike rollover ga bo spletni brskalnik shranil v predpomnilnik, dokler se miša ne premakne nad njo.
Nadomestno besedilo
Dobro nadomestno besedilo naredi vaše slike bolj dostopne. Kadar koli dodate slike, morate vedno uporabljati nekaj vrst nadomestnega besedila.
Ko kliknete, pojdite na URL
Večina ljudi bo kliknila na sliko, ko jo bo videla na strani. Torej bi morali imeti navado, da bi jih lahko kliknili. S to možnostjo lahko določite stran ali URL, s katerim lahko gledalec pritisnete, ko kliknejo sliko. Vendar ta možnost ni potrebna za ustvarjanje prevračanja.
Ko končate vsa polja, kliknite V redu, da bo Dreamweaver ustvaril sliko rolloverja.
Naslednja stran prikazuje scenarij, ki ga zapisuje Dreamweaver.
04 od 06
Dreamweaver piše JavaScript za vas
Če odprete stran v kodnem pogledu, boste videli, da Dreamweaver vstavi blok JavaScript v
vašega dokumenta HTML. Ta blok vključuje 3 funkcije, ki jih potrebujete za zamenjavo slik, ko se miška premakne nad njimi in funkcijo prednapetja, če ste se odločili za to.funkcija MM_swapImgRestore ()
funkcija MM_findObj (n, d)
funkcija MM_swapImage ()
funkcija MM_preloadImages ()
05 od 06
Dreamweaver doda HTML za Rollover
Če se odločite, da boste Dreamweaver prednaložili slike rolloverja, boste videli HTML kodo v telesu dokumenta, da pokličete skript za predaženje, tako da bodo vaše slike hitreje naložene.
onload = "MM_preloadImages (" shasta2.jpg ")"
Dreamweaver dodaja tudi vse kode vaše slike in jo povezuje (če ste vključili URL). Del rollov se doda sidrni oznaki kot atmouseover in atmouseout atribute.
onmouseout = "MM_swapImgRestore ()"
onmouseover = "MM_swapImage (" Image1 "," "," shasta1.jpg ", 1)"
06 od 06
Preizkusite prevračanje
Oglejte si popolnoma funkcionalno rolloverovo sliko in se naučite, kaj je na umu Shasta.