A rollover պատկերն այն կերպարն է, որը փոխում է այլ պատկեր, երբ դուք կամ ձեր հաճախորդը գլորում է մկնիկը դրա վրա: Դրանք սովորաբար օգտագործվում են ինտերակտիվ զգացողություն ստեղծելու համար, ինչպիսիք են կոճակները կամ ներդիրները: Բայց դուք կարող եք ստեղծել rollover նկարներ պարզապես մի բան.
Այս դասընթացը նախատեսված է Dreamweaver- ում ստեղծել rollover պատկեր: Այն նախատեսված է Dreamweaver- ի հետեւյալ տարբերակները օգտագործողների կողմից օգտագործելու համար.
- Dreamweaver MX- ը
- Dreamweaver MX 2004 թ
- Dreamweaver 8
- Dreamweaver CS3- ը
- Dreamweaver CS4- ը
- Dreamweaver CS5- ը
- Dreamweaver CS6- ը
Այս Tutorial- ի պահանջները
- Dreamweaver- ը
Վերոնշյալ տարբերակներից մեկը: - Բնօրինակ պատկեր
Համոզվեք, որ օպտիմալացնել այս պատկերը: Սա կօգնի ձեր էջերը ավելի արագ բեռնաթափել: - The rollover պատկերը
Այս պատկերը պետք է լինի նույն չափորոշիչները, ինչպիսին է բնօրինակ պատկերը: Եվ, ինչպես բնօրինակ պատկերը, պետք է օպտիմալացված լինի էջի բեռնման ժամանակին օգնելու համար: - Վեբ էջ
Սա HTML էջ է, որտեղ դուք կտեղադրեք ձեր rollover պատկերը:
01-ից 06-ը
Սկսել
- Սկսեք Dreamweaver- ը
- Բացեք վեբ էջը, որտեղ ցանկանում եք ձեր գլորումները
02-ից 06-ը
Տեղադրեք Rollover Image Image օբյեկտ
Dreamweaver- ն հեշտացնում է rollover պատկեր ստեղծելու համար:
- Գնալ Insert- ի ցանկում եւ ներքեւի «Image Objects» ենթա-ցանկի մեջ:
- Ընտրեք «Image rollover» կամ «Rollover image»:
Dreamweaver- ի որոշ հին տարբերակները փոխարենը կոչում են Image Objects "Interactive Images":
03-ից 06-ը
Ցույց տալ Dreamweaver- ում պատկերներ
Dreamweaver- ը երկխոսության տուփ է բացում դաշտերի հետ, որոնք անհրաժեշտ են լրացնել, որպեսզի ստեղծեք ձեր rollover պատկերը:
Image անունը
Ընտրեք նկարի անուն, որը եզակի է էջի համար: Այն պետք է լինի մեկ բառ, բայց դուք կարող եք օգտագործել թվերը, գծերը (_) եւ տեֆս (-): Դա կկիրառվի փոխելու պատկերը փոխարինելու համար:
Original պատկեր
Սա էջի URL- ի կամ գտնվելու վայրն է, որը կսկսվի էջում: Այս դաշտում կարող եք օգտագործել հարաբերական կամ բացարձակ ուղի URL- ներ : Սա պետք է լինի մի պատկեր, որը գոյություն ունի ձեր վեբ սերվերի վրա կամ դուք բեռնեք էջով:
Rollover պատկեր
Սա այն պատկերը, որը կհայտնվի այն ժամանակ, երբ մկնիկը պատկերն է: Ճիշտ այնպես, ինչպես բնօրինակ պատկերը, սա կարող է լինել պատկերը բացարձակ կամ հարաբերական ուղին եւ այն պետք է գոյություն ունենա կամ վերբեռնվի, երբ դուք բեռնեք էջը:
Preload Rollover պատկեր
Այս տարբերակը ընտրվում է որպես լռելյայն, քանի որ այն օգնում է ավելի արագ դարձնել rollover- ը: Ընտրելով նախադրելու rollover պատկերը, վեբ զննարկիչը այն կպահի այն քեշի մեջ, մինչեւ մկնիկը գլորում է:
Այլընտրանքային տեքստ
Լավ տարբերակ տեքստը ձեր պատկերներն ավելի մատչելի դարձնում է: Դուք պետք է միշտ օգտագործել ցանկացած տեսակի այլընտրանքային տեքստ:
Երբ կտտացրեք, անցեք URL- ին
Մարդկանց մեծամասնությունը սեղմում է պատկերին, երբ նրանք տեսնում են մեկ էջում: Այսպիսով, դուք պետք է լինեք դրանք սեղմելու սովորույթ: Այս տարբերակը թույլ է տալիս Ձեզ հստակեցնել էջը կամ URL `դիտելու համար, երբ նրանք սեղմում են պատկերը: Սակայն այս տարբերակը պարտադիր չէ ստեղծել rollover:
Երբ ավարտել եք բոլոր դաշտերը, սեղմեք OK, Dreamweaver- ը ձեր rollover պատկերն ստեղծելու համար:
Հաջորդ էջում նշվում է, որ Dreamweaver- ը գրում է սցենար:
04-ից 06-ը
Dreamweaver- ը գրում է JavaScript- ը
Եթե դուք բացեք էջը կոդի տեսքով, կտեսնեք, որ Dreamweaver- ը ձեր HTML փաստաթղթի
- ում տեղադրում է JavaScript- ի բլոկ: Այս բլոկը ներառում է այն 3 գործառույթները, որոնք անհրաժեշտ են, որպեսզի պատկերները փոխանակեն, երբ մկնիկը գլորում է նրանց վրա եւ նախընտրում ֆունկցիան, եթե դուք ընտրեիք դրա համար:գործառույթ MM_swapImgRestore ()
գործառույթ MM_findObj (n, d)
գործառույթ MM_swapImage ()
գործառույթ MM_preloadImages ()
05-ից 06-ը
Dreamweaver- ն ավելացնում է HTML- ը Rollover- ի համար
Եթե դուք ընտրել Dreamweaver- ին նախապես տեղադրեք rollover պատկերները, ապա դուք կտեսնեք HTML կոդը ձեր փաստաթղթի մարմնում `նախադրյալի սցենար զանգելու համար, որպեսզի ձեր պատկերները ավելի արագ բեռնեն:
onload = "MM_preloadImages ('shasta2.jpg')"
Dreamweaver- ը նաեւ ավելացնում է ձեր պատկերի բոլոր կոդերը եւ հղումները (եթե դուք ներառել եք URL): The rollover հատվածը ավելացվել է խարույքի պիտակի վրա որպես onmouseover եւ onmouseout հատկանիշները:
onmouseout = "MM_swapImgRestore ()"
onmouseover = "MM_swapImage ('Image1', '', 'shasta1.jpg', 1)"
06-ից 06-ը
Test դուրս Rollover
Տեսեք լիարժեք ֆունկցիոնալ գլյուկոզայի պատկերը եւ սովորեք, թե ինչն է Շաստայի մտքում: