Si të krijoni një imazh rollover në Dreamweaver

Një imazh rollover është një imazh që ndryshon në një imazh tjetër kur ju ose klienti juaj rrotullon miun mbi të. Këto përdoren zakonisht për të krijuar një ndjesi interaktive si butonat ose skedat. Por ju mund të krijoni imazhe rollover nga vetëm për ndonjë gjë.

Ky tutorial është projektuar për t'ju ndihmuar të krijoni një imazh rollover në Dreamweaver . Është menduar për përdorim nga njerëzit që përdorin versionet e mëposhtme të Dreamweaver:

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

Kërkesat për këtë Tutorial

• Dreamweaver
  Një nga versionet e listuara më sipër.
• Një imazh origjinal
  Sigurohuni që ta zgjedhni këtë imazh. Kjo do t'i ndihmojë faqet tuaja të ngarkohen më shpejt.
• Imazhi i rrotullimit
  Ky imazh duhet të jetë i njëjti dimension si imazhi origjinal. Dhe, si imazhi origjinal, duhet të optimizohet për të ndihmuar në ngarkimin e faqeve.
• Një faqe interneti
  Kjo është faqja HTML ku do të vendosni imazhin tuaj të rollover.

01 nga 06

Fillo

1. Filloni Dreamweaver
2. Hapni faqen në internet ku dëshironi të kaloni në rollover tuaj

02 nga 06

Futni një Objekti Image Image Rollover

Dreamweaver e bën të lehtë krijimin e një imazhi rollover.

1. Shko te menyja Fut dhe poshtë te nën-menyja "Objektet e Imazhit".
2. Zgjidh "Image rollover" ose "Rollover image"

Disa versione të vjetra të Dreamweaver-it i quajnë objektet e imazhit "Imazhe interaktive" në vend.

03 nga 06

Tregojini Dreamweaver-it Cilat Imazhe duhet të përdoren

Dreamweaver shfaq një kuti dialogu me fushat që ju duhet të plotësoni për të krijuar imazhin tuaj rollover.

Emri i imazhit

Zgjidhni një emër imazhi që është unik për faqen. Duhet të jetë një fjalë, por ju mund të përdorni numra, nënvizime (_) dhe hyphene (-). Kjo do të përdoret për të identifikuar imazhin për të ndryshuar.

Imazhi origjinal

Ky është URL ose vendndodhja e imazhit që do të fillojë në faqe. Ju mund të përdorni URL relative relative ose absolute në këtë fushë. Kjo duhet të jetë një imazh që ekziston në web serverin tuaj ose që ju do të ngarkoni me faqe.

Imazhi i Rollover

Ky është imazhi që do të shfaqet kur të klikoni mbi imazhin. Ashtu si imazhi origjinal, kjo mund të jetë një rrugë absolute ose relative ndaj imazhit dhe duhet të ekzistojë ose të ngarkohet kur të ngarkoni faqen.

Preload Rollover Image

Ky opsion është përzgjedhur për shkak se ajo ndihmon që rollover të shfaqet më shpejt. Duke zgjedhur të parapërgatit imazhin rollover, shfletuesi i internetit do ta ruajë atë në një cache derisa të rrokulliset miu mbi të.

Tekst Alternues

Tekst i mirë alternativ i bën imazhet tuaja më të kapshme. Duhet të përdorni gjithmonë një lloj teksti alternativ kur të shtoni ndonjë imazh.

Kur klikuam, Shko te URL

Shumica e njerëzve do të klikojnë mbi një imazh kur ta shohin një në një faqe. Pra, duhet të jeni në zakonin që t'i bëni ato të klikueshme. Ky opsion ju lejon të specifikoni faqen ose URL-në për të marrë shikuesin kur ata klikojnë në imazh. Por ky opsion nuk kërkohet për të krijuar një rollover.

Kur të kesh plotësuar të gjitha fushat, kliko OK për të krijuar Dreamweaver-in për të krijuar imazhin tënd të rrotullimit.

Faqja tjetra tregon skenarin që shkruan Dreamweaver.

04 nga 06

Dreamweaver shkruan JavaScript për ju

Nëse hapni faqen në kodin e parë, do të shihni se Dreamweaver fut një bllok të JavaScript në të dokumentit tuaj HTML. Ky bllok përfshin 3 funksione që ju duhet të keni swap imazhet kur rrotullon miun mbi to dhe funksionin e preload nëse keni zgjedhur për këtë.

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

05 i 06

Dreamweaver Shton HTML për Rollover

Nëse keni zgjedhur të keni Dreamweaver të ngarkoni imazhet e rollover, atëherë do të shihni kodin HTML në trupin e dokumentit tuaj për të thirrur skriptin e përpilimit në mënyrë që imazhet tuaja të ngarkohen më shpejt.

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

Dreamweaver gjithashtu shton të gjithë kodin për imazhin tuaj dhe e lidh atë (nëse keni përfshirë një URL). Pjesa e rrotullimit shtohet në tagun e spirancës si atribute onmouseover dhe onmouseout.

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

06 i 06

Provoni jashtë Rollover

Shihni imazhin plotësisht funksional të rollover dhe mësoni se çfarë është në mendjen e Shastas.