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
- Dreamweaver
Viena iš pirmiau išvardytų versijų. - Originalus vaizdas
Bū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. - Tinklalapis
Tai yra HTML puslapis, kuriame jūs naudojate savo vaizdo įrašą.
01 iš 06
Pradėti
- Pradėk Dreamweaver
- Atidarykite tinklalapį, kuriame norite perkelti
02 iš 06
Įterpti paveikslėlio vaizdų objektą
"Dreamweaver" leidžia lengvai redaguoti vaizdą.
- Eikite į meniu Įterpti ir žemyn į submeniu "Image Objects".
- Pasirinkite "Image rollover" arba "Rollover image"
Kai kurios senesnės "Dreamweaver" versijos yra "Image Objects" "Interaktyvūs vaizdai".
03 iš 06
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 paspaudžiate, 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ė.
Kai baigsite visus laukus, spustelėkite Gerai, kad "Dreamweaver" sukurtų savo "rollover" vaizdą.
Kitame puslapyje rodomas scenarijus, kurį Dreamweaver rašo.
04 iš 06
"Dreamweaver" rašo jums "JavaScript"
Jei atidarysite puslapį kodo rodinyje, pamatysite, kad "Dreamweaver" įterpia "JavaScript" bloką
savo HTML dokumente. Š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 ()
05 iš 06
"Dreamweaver" prideda "Rollover" HTML
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)"
06 iš 06
Išbandykite "Rollover"
Žiūrėkite visiškai funkcionalų apverstą vaizdą ir sužinokite apie Shasta'o protą.