Ümbermineku kujutis on pilt, mis muudab mõnda muud pilti, kui teie või teie klient selle hiirega liigub. Neid kasutatakse sageli interaktiivse tunde loomiseks, näiteks nuppude või vahelehtede loomiseks. Kuid saate luua ümberlülitamise pilte peaaegu midagi.
See juhendaja on loodud selleks, et aidata Dreamweaveris luua ümbermineku kujutist. See on mõeldud kasutamiseks Dreamweaveri järgmistest versioonidest:
- Dreamweaver MX
- Dreamweaver MX 2004
- Dreamweaver 8
- Dreamweaver CS3
- Dreamweaver CS4
- Dreamweaver CS5
- Dreamweaver CS6
Selle õpetuse nõuded
- Dreamweaver
Üks ülaltoodud versioonidest. - Algne kujutis
Veenduge, et see pilt oleks optimeeritud. See aitab teie lehti kiiremini laadida. - Ümbermineku kujutis
See pilt peaks olema sama suur kui originaalkujutis. Ja nagu algne kujutis, tuleks optimeerida, et aidata lehe laadimisaegu. - Veebileht
See on HTML-lehekülg, kuhu saate oma ümbermineku pildi panna.
01 06
Alustama
- Start Dreamweaver
- Avage veebileht, kuhu soovite oma ümberpaigutamise
02 06
Sisestage pildil olev pilt objekt
Dreamweaver muudab hõlpsasti pildi ümbermineku.
- Minge menüüsse Lisa ja alammenüüsse "Pildiobjektid" allapoole.
- Valige "Image rollover" või "Rollover image"
Mõned Dreamweaveri vanemad versioonid nimetavad selle asemel pildialused "Interaktiivsed pildid".
03 alates 06
Öelge Dreamweaverile, mida pilte kasutada
Dreamweaver hüppab dialoogi välja, kus on vaja oma rolloverpilti luua.
Pildi nimi
Valige pildi nimi, mis on lehele unikaalne. See peaks olema üks sõna, kuid võite kasutada numbreid, allkirju (_) ja sidekriipsusid (-). Seda kasutatakse muutuva pildi tuvastamiseks.
Original Image
See on lehe alustamiseks kuvatava pildi URL või asukoht. Selles väljal saate kasutada suhtelisi või absoluutseid tee URL-e . See peaks olema teie veebiserveris olev pilt või see, et laadite selle lehega üles.
Rollover Image
See on pilt, mis ilmub siis, kui hiirega pilti liigutate. Nii nagu algsed pildid, võib see pildi absoluutne või suhteline tee ning see peaks eksisteerima või üles laadima lehe üleslaadimisel.
Eellaaditav pilt
See suvand on vaikimisi valitud, sest see aitab kiiremini edasi lükata. Kui valite rollover-pildi eellaadimise, salvestab veebibrauser selle vahemällu, kuni hiir selle üle liigub.
Alternatiivne tekst
Hea alternatiivne tekst muudab teie pildid ligipääsetavamaks. Piltide lisamisel peaksite alati kasutama teatud tüüpi alternatiivseid tekste.
Kui klõpsate nuppu, minge URL-ile
Enamik inimesi klõpsab pilti, kui nad näevad seda lehel. Nii et peaksite olema harjumus muuta need klikkitavaks. See suvand võimaldab teil määrata lehe või URL-i, et vaataja saaks pilti klõpsates klõpsata. Kuid see võimalus pole vajalik rolloveri loomiseks.
Kui olete kõik väljad täitnud, klõpsake nuppu OK, et Dreamweaver saaks teie ümbermineku pildi luua.
Järgmine leht näitab skripti, mida Dreamweaver kirjutab.
04 06
Dreamweaver kirjutab sulle JavaScripti
Kui avate lehe koodi vaates, näete, et Dreamweaver lisab HTML-dokumendi
JavaScripti blokeeringu. Selles plokis on 3 funktsiooni, mis vajavad piltide vahetamist, kui hiire rullib nende üle ja eellaadimise funktsioon, kui te seda valite.funktsioon MM_swapImgRestore ()
funktsioon MM_findObj (n, d)
funktsioon MM_swapImage ()
funktsioon MM_preloadImages ()
05 06
Dreamweaver Lisab Rolloveri HTML-i
Kui valite Dreamweaveri eellaadimisega ümbermineku pildid, näete oma dokumendi kehas HTML-koodi, et helistada eellaadimise skriptile, nii et teie pildid laadiksid kiiremini.
onload = "MM_preloadImages ('shasta2.jpg')"
Dreamweaver lisab ka kogu pildi koodi ja seob selle (kui lisate URL-i). Ümberminekuosa lisatakse ankurdussildile, nagu onmouseover ja onmouseout atribuudid.
onmouseout = "MM_swapImgRestore ()"
onmouseover = "MM_swapImage ('Image1', '', 'shasta1.jpg', 1)"
06 06
Testi läbi väljavoolu
Vaadake täisfunktsionaalset ümbermineku kujutist ja õppige Shasta meelt.