Unsaon Paghimo sa usa ka Rollover Image sa Dreamweaver

Ang usa ka rollover nga larawan usa ka larawan nga nagbag-o sa laing imahe sa diha nga ikaw o ang imong kustomer nangita sa mouse niini. Kini kasagarang gigamit sa paghimo sa usa ka interactive nga pagbati sama sa mga butones o tabs. Apan mahimo ka nga makahimo og mga rollover nga mga larawan gikan sa bisan unsang butang.

Gihimo kini nga panudlo aron makatabang kanimo paghimo sa usa ka rollover nga larawan sa Dreamweaver . Kini gituyo alang sa paggamit sa mga tawo nga naggamit sa mosunod nga mga bersyon sa Dreamweaver:

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

Mga gikinahanglan alang niini nga Tutorial

• Dreamweaver
  Usa sa mga bersyon nga gilista sa ibabaw.
• Usa ka orihinal nga larawan
  Siguroha nga ma-optimize kini nga imahe. Kini makatabang sa imong mga pahina nga mas dali nga mabug-atan.
• Ang imahen sa rollover
  Kini nga imahe kinahanglan nga mao ra nga mga sukod sama sa orihinal nga larawan. Ug, sama sa orihinal nga hulagway, kinahanglan nga mausab aron makatabang sa mga oras sa pag-load sa pahina.
• Usa ka web page
  Kini ang pahina sa HTML diin imong ibutang ang imong rollover image.

01 sa 06

Pagsugod

1. Sugdi ang Dreamweaver
2. Ablihi ang web page nga gusto nimo imong rollover

02 sa 06

Pagsulod sa usa ka Rollover Image Image Object

Ang Dreamweaver naghimong sayon ​​sa paghimo sa usa ka rollover nga larawan.

1. Lakaw ngadto sa Insert menu ug paingon sa "Image Objects" sub-menu.
2. Pagpili sa "Image rollover" o "Rollover image"

Ang pipila ka mga mas taas nga mga bersyon sa Dreamweaver nagtawag sa Image Objects "Interactive Images" sa baylo.

03 of 06

Sultihi ang Dreamweaver Unsang mga Imaharang Gamiton

Ang Dreamweaver nag-pop sa usa ka kahon sa dialogo uban sa mga natad nga imong gikinahanglan aron mapuno ang imong rollover image.

Ngalan sa litrato

Pagpili og usa ka pangalan sa imahe nga talagsaon alang sa panid. Kinahanglan kini usa ka pulong, apan mahimo nimo gamiton ang mga numero, underscore (_) ug hyphens (-). Kini gamiton aron mahibal-an ang imahe nga mausab.

Orihinal nga Larawan

Kini ang URL o lokasyon sa imahe nga magsugod sa panid. Mahimo nimong gamiton ang paryente nga mga URL sa niini nga field. Kini kinahanglan nga usa ka imahen nga anaa sa imong web server o nga imong i-upload sa pahina.

Image Rollover

Kini mao ang hulagway nga makita kung ikaw mag-mouse ibabaw sa hulagway. Sama sa orihinal nga hulagway, kini mahimo nga hingpit o paryente nga agianan sa larawan, ug kini kinahanglan nga maglungtad o i-upload sa dihang mag-upload ka sa panid.

Larawan sa Preload Rollover

Kini nga kapilian gipili pinaagi sa default tungod kay kini makatabang sa rollover nga mas dali nga makita. Pinaagi sa pagpili nga preload ang imahe nga rollover, ang Web browser mag-imbento niini sa usa ka cache hangtud nga ang mouse moligid niini.

Pagpuli sa Teksto

Ang maayo nga alternatibo nga teksto naghimo sa imong mga imahe nga mas daling maakses. Kinahanglan nimo kanunay nga gamiton ang usa ka matang sa alternate nga teksto sa pagdugang sa bisan unsang mga larawan.

Sa Dihang Gipang-klik, Lakaw Sa URL

Kadaghanan sa mga tawo mag-klik sa usa ka hulagway kung makita nila ang usa sa usa ka panid. Busa kinahanglang mahimo nimong batasan ang paghimo niini nga mahimo nga masundog. Kini nga opsyon nagtugot kanimo sa pagtino sa pahina o URL sa pagkuha sa tigpaminaw kon sila mag-klik sa larawan. Apan kini nga kapilian dili gikinahanglan aron makahimo og usa ka rollover.

Kon nakompleto na nimo ang tanan nga mga luna, i-click ang OK aron ang Dreamweaver maghimo sa imong rollover image.

Ang sunod nga pahina nagpakita sa script nga gimugna sa Dreamweaver.

04 sa 06

Ang Dreamweaver Nagsulat sa JavaScript alang Kanimo

Kon imong ablihan ang pahina sa code-view imong makita nga ang Dreamweaver magsal-ot sa block sa JavaScript sa sa imong HTML nga dokumento. Kini nga bloke naglakip sa 3 nga mga gimbuhaton nga imong gikinahanglan aron ang mga larawan magbalhin sa diha nga ang mouse moligid ibabaw kanila ug ang preload function kon imong gipili alang niana.

function MM_swapImgRestore ()
Gigamit ang MM_findObj (n, d)
gigamit ang MM_swapImage ()
function MM_preloadImages ()

05 of 06

Ang Dreamweaver nagdugang sa HTML alang sa Rollover

Kung gipili nimo nga adunay preload sa Dreamweaver ang mga rollover nga mga larawan, unya imong makita ang HTML code sa lawas sa imong dokumento aron sa pagtawag sa preload script aron ang imong mga hulagway mag-load sa mas madali.

onload = "MM_preloadImages ('shasta2.jpg')"

Ang Dreamweaver usab nagdugang sa tanan nga mga code alang sa imong mga hulagway ug nag-link niini (kung ikaw naglakip sa usa ka URL). Ang bahin sa rollover gidugang sa anchor tag ingon nga onmouseover ug onmouseout nga mga kinaiya.

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

06 of 06

Sulayi ang Rollover

Tan-awa ang hingpit nga functional rollover image ug tun-i kon unsa ang anaa sa hunahuna sa Shasta.