Jinsi ya Kujenga Image Rollover katika Dreamweaver

Picha ya rollover ni picha inayobadilika kwenye picha nyingine wakati wewe au mteja wako hupiga mouse juu yake. Hizi ni kawaida kutumika kutengeneza kujisikia maingiliano kama vile vifungo au tabo. Lakini unaweza kuunda picha za rollover nje ya kitu chochote.

Mafunzo haya yameundwa ili kukusaidia kujenga picha ya rollover katika Dreamweaver . Inalenga kutumiwa na watu kutumia matoleo yafuatayo ya Dreamweaver:

• Dreamweaver MX
• Dreamweaver MX 2004
• Dreamweaver 8
• Dreamweaver CS3
• Dreamweaver CS4
• Dreamweaver CS5
• Dreamweaver CS6

Mahitaji ya Mafunzo haya

• Dreamweaver
  Moja ya matoleo yaliyoorodheshwa hapo juu.
• Picha ya awali
  Hakikisha kuongeza picha hii. Hii itasaidia kurasa zako kuzishughulikia kwa haraka zaidi.
• Picha ya rollover
  Picha hii inapaswa kuwa vipimo sawa na picha ya awali. Na, kama picha ya awali, inapaswa kuboreshwa ili kusaidia mara za mzigo wa ukurasa.
• Ukurasa wa wavuti
  Hii ni ukurasa wa HTML ambapo utaweka picha yako ya rollover.

01 ya 06

Anza

1. Anza Dreamweaver
2. Fungua ukurasa wa wavuti ambapo unataka rollover yako

02 ya 06

Ingiza Image Object Rollover

Dreamweaver inafanya kuwa rahisi kujenga picha ya rollover.

1. Nenda kwenye orodha ya Kuingiza na chini kwenye orodha ya "Vitu vya Picha".
2. Chagua "Rollover ya picha" au "Fungua picha"

Vipengele vingine vya zamani vya Dreamweaver vinitaja vitu vya picha "Picha Zilizoingiliana" badala yake.

03 ya 06

Mwambie Dreamweaver Nini Picha za Kutumia

Dreamweaver pops sanduku la mazungumzo na mashamba unayohitaji kujaza ili kuunda picha yako ya rollover.

Jina la picha

Chagua jina la picha ambayo ni ya kipekee kwa ukurasa. Inapaswa kuwa neno moja, lakini unaweza kutumia namba, wazi (_) na hyphens (-). Hii itatumika kutambua picha kubadilisha.

Picha ya awali

Huu ni URL au eneo la picha ambayo itaanza kwenye ukurasa. Unaweza kutumia URL za jamaa au njia kamili katika uwanja huu. Hii inapaswa kuwa picha iliyopo kwenye seva yako ya wavuti au kwamba utapakia na ukurasa.

Rollover Image

Hii ni picha ambayo itatokea wakati wewe panya juu ya picha. Kama mfano wa awali, hii inaweza kuwa njia kamili au jamaa ya picha, na inapaswa kuwepo au kupakiwa wakati unapakia ukurasa.

Weka upya picha ya Rollover

Chaguo hili ni kuchaguliwa kwa default kwa sababu husaidia rollover kuonekana kwa haraka zaidi. Kwa kuchagua kupakua picha ya rollover, kivinjari cha wavuti kitaiweka kwenye cache hadi panya ikicheza juu yake.

Nakala mbadala

Nakala nzuri mbadala hufanya picha zako ziweze kupatikana. Unapaswa kutumia kila aina ya maandishi mengine wakati wa kuongeza picha yoyote.

Unapobofya, Nenda kwenye URL

Watu wengi watafungua picha wakati wanapoona moja kwenye ukurasa. Kwa hiyo unapaswa kuwa na tabia ya kuwafanya kuwa clickable. Chaguo hili inakuwezesha kutaja ukurasa au URL ili kumtazama mtazamaji wakati wanapakia picha. Lakini chaguo hili halihitajiki kuunda rollover.

Unapomaliza mashamba yote, bofya OK ili uwe na Dreamweaver kuunda picha yako ya rollover.

Ukurasa wa pili unaonyesha script ambayo Dreamweaver anaandika.

04 ya 06

Dreamweaver Anaandika JavaScript kwa Wewe

Ikiwa utafungua ukurasa katika mtazamo wa kificho utaona kwamba Dreamweaver inaingiza blogu ya JavaScript kwenye ya hati yako ya HTML. Kikwazo hiki kinajumuisha kazi 3 ambazo unahitaji kuwa na picha zibadilika wakati panya inawazunguka na kazi ya kupakia kabla ikiwa umeamua kwa hiyo.

kazi MM_swapImgRestore ()
kazi MM_findObj (n, d)
kazi MM_swapImage ()
kazi MM_preloadImages ()

05 ya 06

Dreamweaver anaongeza HTML ya Rollover

Ikiwa umechagua kuwa na Dreamweaver kupakua picha za rollover, basi utaona msimbo wa HTML katika mwili wa hati yako ili kupiga script kabla ya kupakua ili picha zako zireze haraka zaidi.

overload = "MM_pakiaImages ('shasta2.jpg')"

Dreamweaver pia anaongeza msimbo wote wa picha yako na unaunganisha (ikiwa umejumuisha URL). Sehemu ya rollover imeongezwa kwa lebo ya nanga kama onmouseover na sifa za onmouseout.

onmouseout = "MM_swapImgRestore ()"
onmouseover = "MM_swapImage ('Image1', '', 'shasta1.jpg', 1)"

06 ya 06

Jaribu Mchapishaji

Tazama picha ya kazi ya rollover kikamilifu na ujifunze kile kilicho kwenye akili ya Shasta'`.