നിങ്ങൾ അല്ലെങ്കിൽ നിങ്ങളുടെ ഉപഭോക്താവ് മൗസ് ചലിപ്പിക്കുമ്പോൾ, മറ്റേ ഇമേജിലേക്ക് മാറ്റുന്ന ഒരു ചിത്രമാണ് ഒരു റോളോവർ ചിത്രം. ബട്ടണുകൾ അല്ലെങ്കിൽ ടാബുകൾ പോലെയുള്ള ഒരു ആശയവിനിമയം സൃഷ്ടിക്കുന്നതിന് സാധാരണയായി ഇവ ഉപയോഗിക്കപ്പെടുന്നു. എന്നാൽ നിങ്ങൾക്ക് ഏതാണ്ട് ഫോട്ടോകളിൽ നിന്ന് റോൾover ചിത്രങ്ങൾ സൃഷ്ടിക്കാൻ കഴിയും.
ഈ ട്യൂട്ടോറിയൽ ഡ്രീംവൈവറിൽ ഒരു റോൾഓവർ ഇമേജ് സൃഷ്ടിക്കാൻ നിങ്ങളെ സഹായിക്കുന്നതാണ്. ഇത് ഡ്രീംവൈവറിന്റെ ഇനിപ്പറയുന്ന പതിപ്പുകൾ ഉപയോഗിക്കുന്നത് വഴി ഉപയോഗിക്കാൻ ഉദ്ദേശിച്ചുള്ളതാണ്:
- ഡ്രീംവൈവർ എം
- ഡ്രീംവൈവർ എംഎക്സ് 2004
- ഡ്രീംവൈവർ 8
- ഡ്രീംവൈവർ CS3
- ഡ്രീംവൈവർ CS4
- ഡ്രീംവൈവർ CS5
- ഡ്രീംവൈവർ CS6
ഈ ട്യൂട്ടോറിയലിനുള്ള ആവശ്യകതകൾ
- ഡ്രീംവൈവറി
മുകളിൽ ലിസ്റ്റുചെയ്തിരിക്കുന്ന പതിപ്പുകളിൽ ഒന്ന്. - ഒരു യഥാർത്ഥ ചിത്രം
ഈ ചിത്രം ഒപ്റ്റിമൈസ് ചെയ്യുമെന്ന് ഉറപ്പാക്കുക. ഇത് നിങ്ങളുടെ പേജുകൾ കൂടുതൽ വേഗത്തിൽ ലോഡു ചെയ്യാൻ സഹായിക്കും. - റോൾഓവർ ചിത്രം
ഈ ചിത്രം യഥാർത്ഥ ചിത്രം പോലെ തന്നെ സമാന വലിപ്പത്തിലും ആയിരിക്കണം. കൂടാതെ, യഥാർത്ഥ ചിത്രം പോലെ, പേജ് ലോഡ് സമയം സഹായിക്കാൻ ഒപ്റ്റിമൈസ് വേണം. - ഒരു വെബ് പേജ്
നിങ്ങൾ നിങ്ങളുടെ റോൾഓവർ ഇമേജ് ചേർക്കുന്ന HTML പേജാണ് ഇത്.
06 ൽ 01
തുടങ്ങി
- Dreamweaver ആരംഭിക്കുക
- നിങ്ങളുടെ റോളോവർ ആഗ്രഹിക്കുന്ന വെബ് പേജ് തുറക്കുക
06 of 02
ഒരു റോളോവർ ചിത്ര ഇമേജ് ഒബ്ജക്റ്റ് തിരുകുക
ഒരു റോളോവർ ഇമേജ് സൃഷ്ടിക്കുന്നത് ഡ്രീംവൈവർ എളുപ്പമാക്കുന്നു.
- ഇൻസേർട്ട് മെനുവിലും "ഇമേജ് വസ്തുക്കൾ" ഉപമെനുവിലും പോകുക.
- "ഇമേജ് റോളോവർ" അല്ലെങ്കിൽ "റോളോവർ ഇമേജ്" തിരഞ്ഞെടുക്കുക
ഡ്രീം വേവർ ചില പഴയ പതിപ്പുകളെ പകരം ഇമേജ് വസ്തുക്കൾ "ഇന്ററാക്റ്റീവ് ഇമേജുകൾ" എന്ന് വിളിക്കുന്നു.
06-ൽ 03
ഏതൊക്കെ ചിത്രങ്ങൾ ഉപയോഗിക്കാം എന്നതിനെപ്പറ്റി Dreamweaver പറയുക
നിങ്ങളുടെ റോളോവർ ഇമേജ് സൃഷ്ടിക്കുന്നതിന് ആവശ്യമായ ഫീൽഡുകളോടെ ഡയലോഗ് ബോക്സ് ഒരു ഡയലോഗ് ബോക്സിൽ പ്രത്യക്ഷപ്പെടുന്നു.
ചിത്രത്തിന്റെ പേര്
പേജിനായി തനതായ ഒരു ഇമേജ് പേര് തിരഞ്ഞെടുക്കുക. ഇത് ഒരു വാക്കായിരിക്കണം, എന്നാൽ നിങ്ങൾക്ക് സംഖ്യകൾ, അടിവരകൾ (_), ഹൈഫൻസ് (-) ഉപയോഗിക്കാം. മാറ്റം വരുത്താൻ ചിത്രം തിരിച്ചറിയാൻ ഇത് ഉപയോഗിക്കും.
അസൽ ഇമേജ്
പേജിൽ ആരംഭിക്കുന്ന ചിത്രത്തിന്റെ URL അല്ലെങ്കിൽ സ്ഥലം ഇതാണ്. ഈ ഫീൽഡിൽ നിങ്ങൾക്ക് ആപേക്ഷികമായ അല്ലെങ്കിൽ പൂർണ്ണമായ പാത്ത് URL കൾ ഉപയോഗിക്കാം. ഇത് നിങ്ങളുടെ വെബ് സെർവറിൽ നിലനിൽക്കുന്ന ഒരു ഇമേജായിരിക്കണം അല്ലെങ്കിൽ നിങ്ങൾ പേജിൽ അപ്ലോഡ് ചെയ്യും.
റോളോവർ ചിത്രം
ഇമേജ് മേൽ മൗസ് വരുമ്പോൾ ദൃശ്യമാകുന്ന ചിത്രം ഇതാണ്. യഥാർത്ഥ ചിത്രം പോലെ തന്നെ, ഇത് ഇമേജിന്റെ സമ്പൂർണ്ണമായതോ ആപേക്ഷികതോ ആയ പാതായായിരിക്കാമെങ്കിലും നിങ്ങൾ പേജ് അപ്ലോഡ് ചെയ്യുമ്പോഴോ അത് ഉണ്ടായിരിക്കണം അല്ലെങ്കിൽ അപ്ലോഡുചെയ്യേണ്ടതാണ്.
പ്രലോഡ് റോളോവർ ചിത്രം
ഈ ഓപ്ഷൻ സ്വതവേ തെരഞ്ഞെടുക്കും, കാരണം റോളൂവർ വളരെ വേഗത്തിൽ ദൃശ്യമാകാൻ സഹായിക്കുന്നു. റോളോവർ ചിത്രം മുൻകൂറായി അപ്ലോഡുചെയ്യുന്നതിലൂടെ, വെബ് ബ്രൌസർ അതിനെ മൗസ് റോൾ ചെയ്യുന്നതുവരെ കാഷിൽ സംഭരിക്കും.
ഇതര വാചകം
നല്ല ഇതര വാചകം നിങ്ങളുടെ ചിത്രങ്ങൾ കൂടുതൽ ആക്സസ് ചെയ്യാവുന്നതാക്കുന്നു. ഏതെങ്കിലും ചിത്രങ്ങൾ ചേർക്കുമ്പോൾ എല്ലായ്പ്പോഴും ഇതര വാചകം ഉപയോഗിക്കേണ്ടതുണ്ട്.
ക്ലിക്ക് ചെയ്യുമ്പോൾ, URL ലേക്ക് പോവുക
മിക്ക ആളുകളും ഒരു പേജിൽ ഒന്ന് കാണുമ്പോൾ ഒരു ഇമേജ് ക്ലിക്ക് ചെയ്യും. അതിനാൽ അവ നിങ്ങൾക്ക് ക്ലിക്കുചെയ്യാൻ കഴിയുന്ന തരത്തിലുള്ള ശീലമാണ്. കാഴ്ചക്കാരനെ അവർ ചിത്രത്തിൽ ക്ലിക്കുചെയ്യുമ്പോൾ, ഈ പേജ് അല്ലെങ്കിൽ URL വ്യക്തമാക്കാൻ ഈ ഓപ്ഷൻ നിങ്ങളെ അനുവദിക്കുന്നു. പക്ഷേ, ഒരു റോളൂവർ സൃഷ്ടിക്കാൻ ഈ ഓപ്ഷൻ ആവശ്യമില്ല.
നിങ്ങൾ എല്ലാ ഫീൽഡുകളും പൂർത്തിയാക്കി കഴിയുമ്പോൾ, ഡ്രൈവ്വാവർ നിങ്ങളുടെ റോളോവർ ഇമേജ് സൃഷ്ടിക്കാൻ ശരി ക്ലിക്കുചെയ്യുക.
ഡ്രീംവൈവർ എഴുതുന്ന സ്ക്രിപ്റ്റ് അടുത്ത പേജിൽ കാണിക്കുന്നു.
06 in 06
Dreamweaver നിങ്ങൾക്കായി JavaScript എഴുതുന്നു
നിങ്ങൾ കോഡ്-കാഴ്ചയിൽ തുറക്കുന്നപക്ഷം നിങ്ങളുടെ HTML പ്രമാണത്തിന്റെ
എന്ന ജാവാസ്ക്രിപ്റ്റ് ബ്ലോക്ക് ഡ്രീംവൈവർ ചേർക്കുന്നുവെന്ന് നിങ്ങൾ കാണും. ഈ ബ്ലോക്കിൽ നിങ്ങളുടെ മൌസ് റോളുകൾ അടയാളപ്പെടുത്തുമ്പോൾ നിങ്ങൾക്കു് ഇഷ്ടമുള്ള 3 ഫങ്ഷനുകൾ ഉൾപ്പെടുത്താവുന്നതാണു്.ഫംഗ്ഷൻ MM_swapImgRestore ()
ഫംഗ്ഷൻ MM_ ഫിൻഡോബ് (n, d)
ഫങ്ഷൻ MM_swapImage ()
ഫംഗ്ഷൻ MM_preloadImages ()
06 of 05
റോൾഓവർക്കായി HTML ചേർക്കുന്നു
നിങ്ങളുടെ ഡ്രൂവർവെയർ റോളോവർ ഇമേജുകൾ പ്രീലോഡ് ചെയ്യാൻ തീരുമാനിച്ചാൽ, നിങ്ങളുടെ ഇമേജിൽ കാണിച്ചിരിക്കുന്ന എച്ച്.റ്റി.എം.എൽ കോഡ് നിങ്ങളുടെ പ്രിന്റ് സ്ക്രിപ്റ്റ് കോൾ ചെയ്യുന്നതിന് വിളിക്കുന്നു.
onload = "MM_preloadImages ('shasta2.jpg')"
Dreamweaver നിങ്ങളുടെ ചിത്രത്തിനായുള്ള എല്ലാ കോഡും ചേർക്കുകയും ലിങ്കുകൾ നൽകുകയും ചെയ്യുന്നു (നിങ്ങൾ ഒരു URL ഉൾപ്പെടുത്തിയിട്ടുണ്ടെങ്കിൽ). Onmouseover ഉം onmouseout ആട്രിബ്യൂട്ടുകളും പോലെ ആങ്കർ ടാഗിൽ റോളോവർ ഭാഗം ചേർത്തു.
onmouseout = "MM_swapImgRestore ()"
ഓമനമൂർത്തി = "MM_swapImage ('Image1', '', 'shasta1.jpg', 1)"
06 06
റോൾഓവർ പരീക്ഷിക്കുക
പൂർണ്ണമായ ഫങ്ഷണൽ റോളോവർ ഇമേജ് കാണുക, ശാസ്റയുടെ മനസിൽ എന്താണ് മനസ്സിലാക്കുക.