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
- DreamweaverEna od zgoraj navedenih različic.
- Izvirna slikaPoskrbite, da boste to sliko optimizirali. S tem bodo vaše strani hitreje obremenjene.
- Slika rolloverjaTa slika mora biti enake dimenzije kot izvirna slika. In, tako kot izvirna slika, je treba optimizirati, da pomagajo časom nalaganja strani.
- Spletna stranTo je stran HTML, kjer boste postavili svojo sliko rolloverja.
Začeti
- Začni Dreamweaver
- Odprite spletno stran, kjer želite rolover
Vstavite objekt previjalne slike
Dreamweaver olajša ustvarjanje slike rolloverja.
- Pojdite v meni Insert in navzdol do Objekti slike podmeni.
- Izberite Slika rolloverja ali Slika prenosa.
Nekatere starejše različice Dreamweaverja namesto "Interaktivne slike" pokličejo "Image Objects".
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 Dreamweaver ustvari svojo rolloverovo sliko.
Dreamweaver piše JavaScript za vas
Če odprete stran v kodnem pogledu, boste videli, da Dreamweaver vstavi blok JavaScript v
vašega HTML dokumenta. 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 () Č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)" Oglejte si popolnoma funkcionalno rolloverovo sliko in izvedite, kaj je na umu Shaste. Dreamweaver doda HTML za Rollover
Preizkusite prevračanje
