Dreamweaver හි Rollover Image එකක් නිර්මාණය කරන්නේ කෙසේද?

රෝල්වර්චර රූපය ඔබ හෝ ඔබේ පාරිභෝගිකයා එය මත මූසිකය රෝල් කරන විට වෙනත් රූපයක් සඳහා වෙනස්වන රූපයක් වේ. බොට්ස් හෝ ටැබ් වැනි අන්තර්ක්රියාකාරී හැඟීම් ඇති කිරීමට මෙය සාමාන්යයෙන් යොදා ගනී. නමුත් ඔබට ඕනෑම දෙයක් ගැන පෙරළෙන පින්තූර නිර්මාණය කළ හැකිය.

මෙම නිබන්ධනය නිර්මාණය කර ඇත්තේ Dreamweaver හි rollover පිළිඹිබු නිර්මාණය කිරීමට සහාය වීමටය. එය Dreamweaver පහත දැක්වෙන අනුවාදයන් භාවිතයෙන් භාවිතා කරනු ලැබේ:

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

මෙම නිබන්ධනය සඳහා අවශ්යතා

• ඩ්රීම්රයර්
  ඉහතින් ලැයිස්තුගත කර ඇති එක් සංස්කරණයක්.
• මුල් පිටපත
  මෙම පින්තූරය උපරිම කිරීමට වග බලා ගන්න. මෙමගින් ඔබගේ පිටු වඩා ඉක්මණින් ප්රවේශනය වනු ඇත.
• පෙරළිකාර රූපය
  මෙම ඡායාරූපය මුල් රූපයේ පරිදි සමාන මානයන් විය යුතුය. මුල් ඡායාරූපය මෙන්, පිටු පූරණය වේලාවන්ට උපකාරී විය යුතුය.
• වෙබ් පිටුවක්
  ඔබ ඔබේ අළුත් පින්තූරය තබා ඇති HTML පිටුව මෙයයි.

06 දින 01

අරඹන්න

1. Dreamweaver ආරම්භ කරන්න
2. ඔබගේ වෙබ් බ්රවුසරය ඔබට අවශ්ය කරන වෙබ් පිටුව විවෘත කරන්න

06 සිට 06 දක්වා

රෝල්වර්ගයේ රූපමය වස්තුවක් ඇතුළු කරන්න

ඩ්රම්වීවර් විසින් රෝලර් රූපයක් නිර්මාණය කිරීමට පහසු වේ.

1. Insert මෙනුවට ගොස් "පින්තූර වස්තු" උප මෙනුවට යන්න.
2. "පින්තූර rollover" හෝ "Rollover image" තෝරන්න

Dreamweaver හි සමහර පැරණි අනුවාදයන් වෙනුවට Image Objects "අන්තර්ක්රියාකාරී රූප" අමතන්න.

06 දින 03

භාවිතා කිරීමට කුමන රූප ද Dreamweaver කියන්න

Dreamweaver ඔබේ රයිලෝවර් රූප නිර්මාණය කිරීමට අවශ්ය ක්ෂේත්ර සමඟ සංවාද කොටුව දිස්වේ.

රූප නාමය

පිටුව සඳහා අද්විතීය නමක් තෝරන්න. එය එක් වචනයක් විය යුතුය, නමුත් ඔබට අංක, උපරක (_) සහ හයිෆන් (-) භාවිතා කළ හැකිය. මෙය වෙනස් කිරීම සඳහා ප්රතිරූපය හඳුනා ගැනීම සඳහා භාවිතා කරනු ඇත.

මුල් පින්තූරය

පිටුවෙහි ආරම්භ වන රූපයේ URL හෝ ස්ථානය මෙයයි. ඔබට මෙම ක්ෂේත්රයේ සාපේක්ෂ හෝ නිරපේක්ෂ URL මාර්ග භාවිතා කළ හැකිය. මෙය ඔබගේ වෙබ් සේවාදායකය මත ඇති රූපයක් හෝ ඔබ විසින් පිටුවට උඩුගත කරන බවක් විය යුතුය.

රෝල්වර්වර් රූපය

රූපය ඔබ මූසිකය මත ඇති විට ලැබෙන රූපය මෙයයි. මුල් ඡායාරූපය මෙන් ම එය මෙම රූපයට නිරපේක්ෂ හෝ සාපේක්ෂ මාර්ගය විය හැකි අතර එය පිටුව උඩුගත කරන විට හෝ එය උඩුගත කළ යුතුය.

පෙරුම් කරන්න Rollover Image

මෙම විකල්පය පෙරනිමියෙන් තෝරාගෙන ඇති බැවින් එය ඉක්මණින් පෙනෙනු ඇත. Rollover පිළිබිඹුව පූර්ණය කිරීමට තෝරා ගැනීමෙන්, වෙබ් බ්රවුසරය එමඟින් එය සංචිතයක් තුළ ගබඩා කරනු ඇත.

විකල්ප පාඨය

හොඳ විකල්ප පෙළ ඔබේ පින්තූර වඩා පහසුවෙන් ප්රවේශ විය හැකිය. ඕනෑම පින්තූරයක් එකතු කිරීමේදී ඔබ නිතරම විකල්ප ආකාරයක් භාවිතා කළ යුතුය.

ක්ලික් කළ විට, URL වෙත යන්න

බොහෝ දෙනෙක් පිටුවක එක් අයෙකු දර්ශනය වන විට රූපයක් මත ක්ලික් කරනු ඇත. එමනිසා ඔබ ඒවාට සාදාගත හැකි පුරුද්දක් විය යුතුය. මෙම විකල්පය ඔබට රූපය මත ක්ලික් කළ විට නරඹන්නාගේ සිට පිටුවට හෝ URL එක දක්වා විශේෂණය කිරීමට ඉඩ ලබා දේ. නමුත් මෙම විකල්පය රයිලෝවර් නිර්මාණය කිරීමට අවශ්ය නොවේ.

ඔබ සියලු ක්ෂේත්ර සම්පූර්ණ කර ඇති විට, ඩ්රයිව් රිවීරයේ ඔබගේ rollover පිළිඹුව නිර්මාණය කිරීමට OK ක්ලික් කරන්න.

ඊළඟ පිටුවේ දැක්වෙන්නේ Dreamweaver විසින් ලියන ලද ස්ක්රිප්ට් එකයි.

06 දින 04

ඩේමිරේවර් ඔබට JavaScript සඳහා ලියයි

ඔබ කේත-දසුන තුළ පිටුව විවෘත කර ඇත්නම් ඔබ ඔබගේ HTML ලේඛනයේ තුළ ඩේ්ර්රක්වීවර් අක්ෂර වින්යාසය අක්ෂර ඇතුළත් කරයි. මෙම කොටසෙහි ඔබට මූසිකය රෝල් කර ඇති විට සහ ඔබ විසින් තෝරාගෙන ඇති පූර්වාස බොත්තම ක්රියාත්මක වන විට, එම පිංතූර සවි කිරීමට අවශ්ය වන 3 කාර්යයන් ඇතුළත් වේ.

කාර්යය MM_swapImgRestore ()
ශ්රිතය MM_findObj (n, d)
කාර්යය MM_swapImage ()
කාර්යය MM_preloadImages ()

06 සිට 05 දක්වා

Dreamweaver Rollover සඳහා HTML එකතු කරයි

ඔබ Dreamweaver රීලෝඩ් කරන ලද පින්තූර පූර්ණය කිරීමට තෝරා ගත්තානම්, ඔබේ ලේඛනයේ ශරීරයේ HTML කේතය පෙරහන විධානාවලිය කැඳවීමට ඔබේ පින්තූර වඩා ඉක්මණින් ප්රවේශනය කරනු ඇත.

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

ඩ්රම්වීවර් ඔබේ පින්තූරය සඳහා සියලු කේතය එකතු කර එය සබැඳිය (ඔබ URL ඇතුලත් කළහොත්). අච්චු ටැග් එකට එකතු කිරීම සහ ආදේශක ගුණාංග ලෙස අළුත් කර ඇත.

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

06 සිට 06 දක්වා

රෝල්වර්ගර් පරීක්ෂා කරන්න

සම්පූර්ණයෙන්ම ක්රියාකාරී රෝල්වර්ගයේ රූපය බලන්න. ෂස්ටාගේ මනස ගැන ඉගෙන ගන්න.