Paano Gumawa ng isang Rollover Image sa Dreamweaver

Ang isang rollover na imahe ay isang imahe na nagbabago sa ilang iba pang mga imahe kapag ikaw o ang iyong customer roll ang mouse sa ibabaw nito. Ang mga ito ay karaniwang ginagamit upang lumikha ng isang interactive na pakiramdam tulad ng mga pindutan o mga tab. Ngunit maaari kang lumikha ng mga imahe ng rollover mula sa halos anumang bagay.

Ang tutorial na ito ay dinisenyo upang tulungan kang lumikha ng isang rollover na imahe sa Dreamweaver . Ito ay para sa paggamit ng mga taong gumagamit ng mga sumusunod na bersyon ng Dreamweaver:

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

Mga Kinakailangan para sa Tutorial na ito

• Dreamweaver
  Isa sa mga bersyon na nakalista sa itaas.
• Isang orihinal na larawan
  Tiyaking i-optimize ang larawang ito. Matutulungan nito ang iyong mga pahina nang mas mabilis na mag-load.
• Ang imahe ng rollover
  Ang imaheng ito ay dapat na ang parehong mga sukat ng orihinal na imahe. At, tulad ng orihinal na larawan, dapat na ma-optimize upang matulungan ang mga pahina ng pag-load ng pahina.
• Isang web page
  Ito ang pahina ng HTML kung saan ilalagay mo ang iyong rollover na imahe.

01 ng 06

Magsimula

1. Magsimula sa Dreamweaver
2. Buksan ang web page kung saan mo nais ang iyong rollover

02 ng 06

Magsingit ng isang Image Rollover Image Object

Ginagawa ng Dreamweaver na madaling lumikha ng isang imahe ng rollover.

1. Pumunta sa menu ng Insert at pababa sa sub-menu na "Mga Imahe ng Imahe".
2. Piliin ang "Rollover ng imahe" o "imahe ng Rollover"

Ang ilang mga mas lumang bersyon ng Dreamweaver ay tinatawag na "Image Interactive" na Mga Bagay sa halip.

03 ng 06

Sabihin sa Dreamweaver Anong Mga Larawan ang Gagamitin

Ang Dreamweaver ay nagpa-pop ng isang dialog box na may mga patlang na kailangan mong punan upang lumikha ng iyong rollover na imahe.

Pangalan ng Imahe

Pumili ng isang pangalan ng larawan na natatangi para sa pahina. Ito ay dapat na ang lahat ng isang salita, ngunit maaari mong gamitin ang mga numero, underscore (_) at hyphens (-). Ito ay gagamitin upang kilalanin ang larawan upang baguhin.

Orihinal na Larawan

Ito ang URL o lokasyon ng imahe na magsisimula sa pahina. Maaari mong gamitin ang mga kamag-anak o ganap na mga URL ng landas sa patlang na ito. Ito ay dapat na isang imahe na umiiral sa iyong web server o na mag-upload ka sa pahina.

Imahe ng Rollover

Ito ang larawan na lilitaw kapag nag-mouse ka sa larawan. Tulad ng orihinal na imahe, ito ay maaaring isang ganap o kamag-anak landas sa imahe, at dapat itong umiiral o mai-upload kapag nag-upload ka ng pahina.

Larawan ng Preload Rollover

Ang pagpipiliang ito ay pinili sa pamamagitan ng default dahil ito ay tumutulong sa rollover lalabas nang mas mabilis. Sa pamamagitan ng pagpili sa preload ang rollover na imahe, ang Web browser ay mag-iimbak ng mga ito sa isang cache hanggang ang mouse ay gumulong sa ibabaw nito.

Kahaliling Teksto

Ang mas mahusay na alternatibong teksto ay ginagawang mas naa-access ang iyong mga larawan. Dapat mong palaging gumamit ng ilang uri ng kahaliling teksto kapag nagdadagdag ng anumang mga larawan.

Kapag Naka-click, Pumunta sa URL

Ang karamihan sa mga tao ay mag-click sa isang imahe kapag nakita nila ang isa sa isang pahina. Kaya dapat mong maging sa ugali ng paggawa ng mga ito naki-click. Pinapayagan ka ng pagpipiliang ito na tukuyin ang pahina o URL upang dalhin ang viewer kapag nag-click sila sa larawan. Ngunit ang pagpipiliang ito ay hindi kinakailangan upang lumikha ng isang rollover.

Kapag natapos mo na ang lahat ng mga patlang, i-click ang OK upang lumikha ng Dreamweaver ang iyong rollover na imahe.

Ang susunod na pahina ay nagpapakita ng script na isinulat ng Dreamweaver.

04 ng 06

Sinusulat ng Dreamweaver ang JavaScript para sa Iyo

Kung buksan mo ang pahina sa code-view makikita mo na ang Dreamweaver ay nagsasama ng isang bloke ng JavaScript sa ng iyong HTML na dokumento. Kabilang sa bloke na ito ang 3 mga pag-andar na kailangan mo upang mapalitan ang mga imahe kapag ang mouse ay gumagalaw sa ibabaw ng mga ito at ang preload function kung pinili mo iyon.

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

05 ng 06

Nagdadagdag ng Dreamweaver ang HTML para sa Rollover

Kung pinili mong magkaroon ng preload ng Dreamweaver ang mga imahe ng rollover, makikita mo ang HTML code sa katawan ng iyong dokumento upang tawagan ang preload script upang ang iyong mga larawan ay mas mabilis na mag-load.

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

Dinagdagan din ng Dreamweaver ang lahat ng code para sa iyong larawan at i-link ito (kung isinama mo ang isang URL). Ang bahagi ng rollover ay idinagdag sa tag na anchor bilang onmouseover at onmouseout na mga katangian.

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

06 ng 06

Subukan ang Rollover

Tingnan ang fully functional rollover na imahe at alamin kung ano ang nasa isip ng Shasta.