Apgāšanās attēls ir attēls, kas mainās uz kādu citu attēlu, kad jūs vai jūsu klients iespiež peli pār to. Tie parasti tiek izmantoti, lai izveidotu interaktīvu sajūtu, piemēram, pogas vai cilnes. Bet jūs varat izveidot apgāšanās attēlus no gandrīz jebko.
Šī apmācība ir izstrādāta, lai palīdzētu jums izveidot rollover attēlu Dreamweaver . Tas ir paredzēts lietošanai cilvēkiem, kuri izmanto šādas Dreamweaver versijas:
- Dreamweaver MX
- Dreamweaver MX 2004
- Dreamweaver 8
- Dreamweaver CS3
- Dreamweaver CS4
- Dreamweaver CS5
- Dreamweaver CS6
Prasības šai apmācībai
- Dreamweaver
Viena no iepriekš minētajām versijām. - Oriģinālais attēls
Noteikti optimizējiet šo attēlu. Tas palīdzēs jūsu lapām ielādēt ātrāk. - Apgāšanās attēls
Šim attēlam jābūt tādam pašam izmēram kā sākotnējam attēlam. Un, tāpat kā oriģinālajam attēlam, ir jābūt optimizētam, lai palīdzētu lapu ielādes laikam. - Mājas lapa
Šī ir HTML lapa, kurā jūs ievietojat savu apgāšanās attēlu.
01 no 06
Sāc
- Sāciet Dreamweaver
- Atveriet Web lapu, kurā vēlaties pārcelt
02 no 06
Ievietojiet izkliedētāja attēlu attēla objektu
Dreamweaver ļauj viegli izveidot apgāšanās attēlu.
- Atveriet izvēlni Ievietot un apakšizvēlni apakšizvēlnei "Attēlu objekti".
- Izvēlieties "Image rollover" vai "Rollover image"
Dažas vecākas Dreamweaver versijas drīzāk izsauc attēla objektus "Interaktīvie attēli".
03 no 06
Pastāstiet Dreamweaver, kādus attēlus izmantot
Dreamweaver parādās dialoglodziņš ar laukiem, kas jāaizpilda, lai izveidotu savu apgāšanās attēlu.
Attēla nosaukums
Izvēlieties attēla nosaukumu, kas ir unikāls lapai. Tas viss būtu viens vārds, bet jūs varat izmantot ciparus, pasvītras (_) un defises (-). To izmantos, lai identificētu maināmo attēlu.
Oriģinālais attēls
Tas ir attēla URL vai atrašanās vieta, kas sāks darboties lapā. Šajā laukā varat izmantot relatīvo vai absolūto ceļa URL . Tam jābūt attēlam, kas ir jūsu tīmekļa serverī vai ko augšupielādēsit ar lapu.
Rollover attēls
Šis ir attēls, kas parādīsies peles kursorā virs attēla. Tāpat kā oriģinālais attēls, tas var būt absolūts vai relatīvs attēls attēlam, un tas ir jāpārstāda vai jāielādē, augšupielādējot lapu.
Pirmsielādēt attēlu
Pēc noklusējuma šī opcija ir atlasīta, jo tā palīdz ātrāk pārnest. Izvēloties iepriekšpārlādēt attēlu, Web pārlūks to saglabās kešatmiņā, kamēr peles kursors to pārcels.
Alternatīvais teksts
Labs alternatīvs teksts padara jūsu attēlus pieejamākus. Pievienojot jebkādus attēlus, vienmēr vajadzētu izmantot kādu alternatīvā teksta veidu.
Noklikšķinot, pārejiet uz URL
Lielākā daļa cilvēku noklikšķina uz attēla, kad viņi redz vienu lapā. Tāpēc jums ir jābūt ieradam padarīt tos noklikšķināmus. Šī opcija ļauj norādīt lapu vai URL, lai skatītājs varētu noklikšķināt uz attēla. Bet šī opcija nav nepieciešama, lai izveidotu apgāšanos.
Kad esat pabeidzis visus laukus, noklikšķiniet uz Labi, lai Dreamweaver izveidotu savu apgāšanās attēlu.
Nākamajā lapā tiek parādīts skripts, ko Dreamweaver raksta.
04 no 06
Dreamweaver Raksta JavaScript jums
Ja atverat lapu koda skatā, jūs redzēsiet, ka Dreamweaver jūsu HTML dokumentā
ievieto JavaScript bloku. Šajā blokā ietilpst 3 funkcijas, kas jums nepieciešamas, lai attēli tiktu mainīti, kad peli tos pārbīdīs, un priekšatlādes funkcija, ja izvēlēsities to.funkcija MM_swapImgRestore ()
funkcija MM_findObj (n, d)
funkcija MM_swapImage ()
funkcija MM_preloadImages ()
05 no 06
Dreamweaver Pievieno HTML par Rollover
Ja jūs izvēlējāties, lai Dreamweaver iepriekš ielādētu apgāšanas attēlus, dokumenta pamattekstā redzēsiet HTML kodu, lai izsauktu ielādes skriptu, lai jūsu attēli tiktu ielādēti ātrāk.
onload = "MM_preloadImages ('shasta2.jpg')"
Dreamweaver arī pievieno visu jūsu attēla kodu un sasaista to (ja jūs iekļāvāt URL). Apgāšanās daļa tiek pievienota enkura tagam kā onmouseover un onmouseout atribūtus.
onmouseout = "MM_swapImgRestore ()"
onmouseover = "MM_swapImage ('Image1', '', 'shasta1.jpg', 1)"
06 no 06
Izmēģiniet Rollover
Skatiet pilnīgi funkcionālo apgāšanās attēlu un uzziniet, kas ir Shasta domā.