Apvyniojimo vaizdas yra vaizdas, kuris keičia kokį nors kitą vaizdą, kai jūs ar jūsų klientas veržiasi pele. Tai dažniausiai naudojama interaktyvaus jausmo sukūrimui, pvz., Mygtukams ar skirtukams. Bet jūs galite sukurti apversti vaizdus iš beveik nieko.
Ši mokymo priemonė sukurta siekiant padėti jums sukurti "rollover" vaizdą "Dreamweaver". Jis skirtas naudoti žmonėms, naudojantiems šias "Dreamweaver" versijas:
- Dreamweaver MX
- "Dreamweaver MX 2004"
- Dreamweaver 8
- Dreamweaver CS3
- Dreamweaver CS4
- Dreamweaver CS5
- Dreamweaver CS6
Šio pamokymo reikalavimai
- DreamweaverViena iš pirmiau išvardytų versijų.
- Originalus vaizdasBūtinai optimizuokite šį vaizdą. Tai padės jūsų puslapiams įkelti greičiau.
- Apvyniojimo vaizdasŠis vaizdas turi būti toks pat kaip pradinis vaizdas. Ir, kaip ir originalus vaizdas, reikia optimizuoti, kad padėtų puslapio įkėlimo laikui.
- TinklalapisTai yra HTML puslapis, kuriame jūs naudojate savo vaizdo įrašą.
Pradėti
- Pradėk Dreamweaver
- Atidarykite tinklalapį, kuriame norite perkelti
Įterpkite "Rollover Image Object"
"Dreamweaver" leidžia lengvai redaguoti vaizdą.
- Eikite į meniu Įterpti ir žemyn į Vaizdų objektai submeniu.
- Pasirinkite Vaizdo perkėlimas arba Apsisukimo vaizdas.
Kai kurios senesnės "Dreamweaver" versijos yra "Image Objects" "Interaktyvūs vaizdai".
Pasakykite "Dreamweaver", kokius vaizdus naudoti
"Dreamweaver" atsiranda dialogo langas su laukeliais, kuriuos reikia užpildyti, kad sukurtumėte savo vaizdo įrašą.
Vaizdo pavadinimas
Pasirinkite vaizdo pavadinimą, kuris yra unikalus puslapiui. Tai turėtų būti tik vienas žodis, tačiau galite naudoti skaičiai, pabraukimai (_) ir brūkšneliai (-). Tai bus naudojama nustatant įvaizdį, kurį norite keisti.
Originalus vaizdas
Tai yra puslapio pradžioje esančio paveikslėlio URL arba vieta. Šiame lauke galite naudoti santykinius ar absoliučius maršruto URL. Tai turėtų būti vaizdas, esantis jūsų žiniatinklio serveryje arba kurį įkelsite su puslapiu.
Vaizdas "Rollover"
Tai yra paveikslėlis, kuris pasirodys, kai pelėsite virš nuotraukos. Tiesiog kaip pradinis vaizdas, tai gali būti absoliutus ar santykinis vaizdas į paveikslėlį, ir jis turėtų egzistuoti arba būti įkeltas įkeliant puslapį.
Išankstinio įkėlimo paveikslėlis
Ši parinktis pasirinkta pagal numatytuosius nustatymus, nes ji padeda greičiau persukti. Pasirinkus išankstinį įkėlimo vaizdą, žiniatinklio naršyklė jį saugo talpykloje tol, kol pelė ją sukurs.
Alternatyvus tekstas
Geras alternatyvus tekstas daro vaizdus prieinamesnius. Pridedant bet kokius vaizdus, visada turėtumėte naudoti tam tikrą alternatyvų teksto tipą.
Kai spustelėjote, eikite į URL
Daugelis žmonių spustelės vaizdą, kai pamatysite tą puslapį. Taigi, jūs turite būti įpratęs, kad juos būtų galima spustelėti. Ši parinktis leidžia nurodyti puslapį arba URL, kad žiūrovas įjungtų, kai jie spustelėja vaizdą. Tačiau ši parinktis neprivaloma, kad būtų sukurta naujovė.
Baigę visus laukus, spustelėkite Gerai turėti "Dreamweaver" sukurti savo "rollover" vaizdą.
"Dreamweaver" rašo jums "JavaScript"
Jei atidarysite puslapį peržiūrėję kodą, pamatysite, kad "Dreamweaver" įterpia "JavaScript" bloką
savo HTML dokumento. Šiame bloke yra 3 funkcijos, kurias reikia keisti vaizdus, kai pelė juos sukasi, ir išankstinio įkėlimo funkcija, jei pasirinksite.
funkcija MM_swapImgRestore ()funkcija MM_findObj (n, d)funkcija MM_swapImage ()funkcija MM_preloadImages () Jei pasirinkote, kad "Dreamweaver" iš anksto įkels vaizdo įrašus, tuomet pamatysite HTML kodą dokumento kūne, kad paskambintumėte į įkėlimo scenarijų, kad jūsų vaizdai būtų greitai įkeliami. onload = "MM_preloadImages ('shasta2.jpg')" "Dreamweaver" taip pat priduria visą jūsų paveikslėlio kodą ir susieja jį (jei įtraukėte URL). Apvyniojimo dalis pridedama prie inkaro žyma kaip "onmouseover" ir "onmouseout" atributai. onmouseout = "MM_swapImgRestore ()"onmouseover = "MM_swapImage ('Image1', '', 'shasta1.jpg', 1)" Žiūrėkite visiškai funkcionalų apverstą vaizdą ir sužinokite apie Shasta protą. "Dreamweaver" prideda "Rollover" HTML
Išbandykite "Rollover"
