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
- DreamweaverViena no iepriekš minētajām versijām.
- Oriģinālais attēlsNoteikti 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.
Sāc
- Sāciet Dreamweaver
- Atveriet Web lapu, kurā vēlaties pārcelt
Ievietojiet Rollover attēla objektu
Dreamweaver ļauj viegli izveidot apgāšanās attēlu.
- Iet uz izvēlni Ievietot un uz leju līdz Attēla objekti apakšizvēlne.
- Izvēlieties Attēlu apgāšanās vai Rollover attēls.
Dažas vecākas Dreamweaver versijas drīzāk izsauc attēla objektus "Interaktīvie attēli".
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 uz Iet 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.
Dreamweaver Raksta JavaScript jums
Ja atvērsit lapu kodu skatā, jūs redzēsiet, ka Dreamweaver ievieto JavaScript bloku
no jūsu HTML dokumenta. Š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 () 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)" Skatiet pilnīgi funkcionālo apgāšanās attēlu un uzziniet, kas ir Šasta prātā. Dreamweaver Pievieno HTML par Rollover
Izmēģiniet Rollover
