Dreamweaver ഉപയോഗിച്ച് ഒരു ഇമേജ് മാപ്പ് സൃഷ്ടിക്കുന്നതിനുള്ള നുറുങ്ങുകൾ

ഇമേജ് മാപ്പുകൾ ഉപയോഗിക്കുന്നതിന് നേട്ടങ്ങളും കുറവുകളും

"ഡിസൈൻ മാപ്പുകൾ" എന്നറിയപ്പെടുന്ന നിരവധി സൈറ്റുകൾ വെബ് സൈറ്റിലെ ചരിത്രത്തിൽ ഒരു പോയിന്റ് ഉണ്ടായിരുന്നു. ഒരു താളിൽ ഒരു പ്രത്യേക ഇമേജിൽ ഘടിപ്പിച്ചിട്ടുള്ള കോർഡിനേറ്റുകളുടെ ഒരു പട്ടികയാണ് ഇത്. ഈ കോർഡിനേറ്റുകൾ ആ ഇമേജിൽ ഹൈപ്പർലിങ്ക് പ്രദേശങ്ങൾ സൃഷ്ടിക്കുന്നു, അവ ഒരു ഗ്രാഫിക്കിലേക്ക് "ചൂടുള്ള പാടുകൾ" ചേർത്ത് അത്യാവശ്യമാണ്, ഓരോന്നും വ്യത്യസ്ത സ്ഥലങ്ങളിലേക്ക് ലിങ്ക് ചെയ്യാൻ കഴിയും. ഒരു ചിത്രത്തിലേക്ക് ഒരു ലിങ്ക് ടാഗ് ചേർക്കുന്നതിനേക്കാൾ വളരെ വ്യത്യസ്തമാണ്, അത് ഒരു ഗ്രാഫിക് ഒരൊറ്റ ലക്ഷ്യത്തിലേക്കുള്ള വലിയ ലിങ്ക് ആകുന്നതിന് കാരണമാക്കും.

ഉദാഹരണങ്ങൾ - യുണൈറ്റഡ് സ്റ്റേറ്റ്സിന്റെ ഒരു ഇമേജ് ഉപയോഗിച്ച് ഒരു ഗ്രാഫിക് ഫയൽ ഉണ്ടെന്ന് കരുതുക. ഓരോ സംസ്ഥാനവും "ക്ലിക്കുചെയ്യാവുന്നവ" ആയിരിക്കാൻ നിങ്ങൾ ആഗ്രഹിച്ചാൽ, ആ നിർദ്ദിഷ്ട സംസ്ഥാനത്തെക്കുറിച്ചുള്ള പേജിലേക്ക് പോവുകയാണെങ്കിൽ നിങ്ങൾക്ക് ഒരു ചിത്ര മാപ്പ് ഉപയോഗിച്ച് ഇത് ചെയ്യാൻ കഴിയും. സമാനമായി, നിങ്ങൾക്ക് സംഗീത ബാൻഡിന്റെ ഒരു ഇമേജ് ഉണ്ടെങ്കിൽ, ആ ഓരോ അംഗത്തെയും ആ ബാൻഡ് അംഗത്തെക്കുറിച്ചുള്ള തുടർന്നുള്ള പേജിലേക്ക് ക്ലിക്കുചെയ്യാൻ നിങ്ങൾക്ക് ഒരു ഇമേജ് മാപ്പ് ഉപയോഗിക്കാം.

ഇമേജ് മാപ്പുകൾ ശബ്ദമുണ്ടോ? അവർ തീർച്ചയായും, ഇന്നത്തെ വെബിൽ അവർ അനുകൂലിച്ചുപോയി. ഇമേജിന്റെ മാപ്പുകൾക്ക് നിർദ്ദിഷ്ട കോർഡിനേറ്റുകൾ പ്രവർത്തിക്കാൻ ആവശ്യമായതിനാൽ ചുരുങ്ങിയത് ഭാഗികമാണ്. സ്ക്രീനുകളുടെ അല്ലെങ്കിൽ ഉപകരണത്തിന്റെ വലിപ്പത്തെ അടിസ്ഥാനമാക്കിയുള്ള പ്രതികരണങ്ങളും ഇമേജിന്റെ സ്കെയിലുകളും സൈറ്റുകൾ ഇന്ന് നിർമ്മിക്കപ്പെട്ടിരിക്കുന്നു . ഇതിനർത്ഥം, മുൻകൂട്ടി സജ്ജമാക്കിയ കോർഡിനേറ്റുകൾ, അതായത് ഇമേജുകൾ എങ്ങനെ പ്രവർത്തിക്കുന്നു, ഒരു സൈറ്റ് സ്കെയിലുകളും ഇമേജുകളും മാറുന്ന സമയത്ത് വീഴുന്നു. ഇതുകൊണ്ടാണ്, ചിത്രങ്ങളുടെ ഭൂപടങ്ങൾ അപൂർവ്വമായി പ്രൊഡക്ഷൻസ് സൈറ്റുകളിൽ ഉപയോഗിക്കുന്നത് ഇതാണ്, എന്നാൽ ഒരു പേജിന്റെ വലുപ്പം നിർബന്ധിക്കുന്ന ഡെമോകളും സംഭവങ്ങളും അവർക്ക് ഇപ്പോഴും ഗുണം ചെയ്യും.

എങ്ങനെ ഒരു ഇമേജ് മാപ്പ് സൃഷ്ടിക്കാൻ അറിയാൻ ആഗ്രഹമുണ്ടോ, പ്രത്യേകിച്ച് എങ്ങനെ ഡ്രീംവൈവറേ അങ്ങനെ ചെയ്യാൻ? . പ്രക്രിയ പ്രത്യേകിച്ചും ബുദ്ധിമുട്ടുള്ള കാര്യമല്ല, എന്നാൽ ഇത് എളുപ്പമല്ല, അതിനാൽ നിങ്ങൾ തുടങ്ങുന്നതിന് മുമ്പ് ചില അനുഭവങ്ങൾ ഉണ്ടായിരിക്കണം.

ആമുഖം

നമുക്ക് തുടങ്ങാം. നിങ്ങളുടെ വെബ്പേജിൽ ഒരു ചിത്രം ചേർക്കുന്നതിനാണ് നിങ്ങൾ ചെയ്യേണ്ട ആദ്യ പടി. നിങ്ങൾ അത് ഹൈലൈറ്റ് ചെയ്യാനായി ഇമേജിൽ ക്ലിക്കുചെയ്യും. അവിടെ നിന്ന് നിങ്ങൾക്ക് പ്രോപ്പർട്ടീസ് മെനുവിലേക്ക് പോയി (മൂന്ന് ഹോട്ട്സ്പോട്ട് ഡ്രോയിംഗ് ടൂളുകളിൽ ഒന്ന് ക്ലിക്ക് ചെയ്യുക: ദീർഘചതുരം, സർക്കിൾ അല്ലെങ്കിൽ പോളിഗോൺ എന്നിവ നിങ്ങളുടെ പ്രോപ്പർട്ടി ബാർയിൽ ചെയ്യാൻ കഴിയുന്ന നിങ്ങളുടെ ചിത്രത്തിന് പേര് നൽകരുത്. നിങ്ങൾക്ക് ആവശ്യമുള്ളതെന്തും. "മാപ്പ്" ഒരു ഉദാഹരണമായി ഉപയോഗിക്കുക.

ഇപ്പോൾ, ഈ ടൂളുകളിലൊന്ന് ഉപയോഗിച്ച് നിങ്ങളുടെ ഇമേജിൽ നിങ്ങൾക്കാവശ്യമുള്ള ആകാരം വരയ്ക്കുക. ചതുരാകൃതിയിലുള്ള പാടുകൾ നിങ്ങൾക്കുണ്ടെങ്കിൽ, rectange ഉപയോഗിക്കുക. സർക്കിളിന്റെ അതേ. നിങ്ങൾക്ക് കൂടുതൽ സങ്കീർണ്ണമായ ഹോട്ട്സ്പോട്ട് ആകാരങ്ങൾ വേണമെങ്കിൽ, പോളിഗോൺ ഉപയോഗിക്കുക. യു.ജി.യുടെ മാതൃകയിൽ നിങ്ങൾ സാധ്യതയിലാണെങ്കിൽ, പൊടിക്കാരൻ നിങ്ങളെ പോയിന്റ്സ് ഉപേക്ഷിച്ച് ഇമേജിൽ വളരെ സങ്കീർണ്ണവും ക്രമരഹിതവുമായ ആകൃതികൾ സൃഷ്ടിക്കാൻ അനുവദിക്കും.

ഹോട്ട്സ്പോട്ടിനായുള്ള പ്രോപ്പർട്ടീസ് ജാലകത്തിൽ, ഹോട്ട്സ്പോട്ട് ലിങ്ക് ചെയ്യേണ്ട പേജിലേക്ക് ടൈപ്പുചെയ്യുക അല്ലെങ്കിൽ ബ്രൌസ് ചെയ്യുക. ആ ബന്ധിപ്പിക്കാൻ കഴിയുന്ന സ്ഥലമാണ് ഇത് സൃഷ്ടിക്കുന്നത്. നിങ്ങളുടെ മാപ്പ് പൂർത്തിയായിട്ടില്ല, നിങ്ങൾ ചേർക്കാൻ ആഗ്രഹിക്കുന്ന എല്ലാ ലിങ്കുകളും ചേർക്കുന്നതുവരെ ഹോട്ട്സ്പോട്ടുകൾ ചേർക്കുന്നത് തുടരുക.

നിങ്ങൾ പൂർത്തിയാക്കിക്കഴിഞ്ഞാൽ, അത് ശരിയായി പ്രവർത്തിക്കുന്നുണ്ടെന്ന് ഉറപ്പുവരുത്താൻ നിങ്ങളുടെ ഇമേജ് മാപ്പ് ബ്രൌസറിൽ റിയേർ ചെയ്യുക. ശരിയായ ലിങ്ക് അല്ലെങ്കിൽ വെബ് പേജിലേക്ക് പോകുന്നത് ഉറപ്പാക്കാനായി ഓരോ ലിങ്കും ക്ലിക്കുചെയ്യുക.

ഇമേജ് മാപ്പുകളുടെ ന്യൂനതകൾ

പ്രതികരിച്ച വെബ്സൈറ്റുകളുമായി ബന്ധപ്പെട്ട് മുൻപറഞ്ഞ അഭാവത്തിന് പുറത്ത് പോലും, ഇമേജ് മാപ്പുകളിൽ നിരവധി ദോഷങ്ങളുണ്ടെന്ന് ബോധ്യപ്പെടുത്തുക. ആദ്യം, ചെറിയ വിശദാംശങ്ങൾ ഒരു ഇമേജ് മാപ്പിൽ മറഞ്ഞേക്കാം. ഉദാഹരണത്തിന്, ഒരു ഭൂഖണ്ഡം ഏത് ഭൂഖണ്ഡമാണ് എന്ന് നിർണ്ണയിക്കാൻ ഭൂമിശാസ്ത്ര ഇമേജ് മാപ്പുകൾ സഹായിച്ചേക്കാം, എന്നാൽ ഈ ഭൂപടങ്ങളെ വ്യക്തമാക്കുന്നതിന് ഉപയോക്തൃ ഭൂപടം വ്യക്തമാക്കുന്നതിന് ഈ മാപ്പുകൾ വിശദമായേക്കില്ല. ഒരു ഇമേജ് മാപ്പ് ഉപയോക്താവിന് ഏഷ്യയിൽ നിന്നാണെങ്കിലും നിശ്ചയമായും കംബോഡിയയിൽ നിന്നുള്ളതല്ലെന്ന് തീരുമാനിക്കാൻ സഹായിച്ചേക്കാം.

ഇമേജ് മാപ്പുകൾ പതുക്കെ ലോഡ് ചെയ്യാനിടയുണ്ട്. വെബ് സൈറ്റിലെ ഓരോ പേജിലും ഉപയോഗിക്കേണ്ടത്ര സ്ഥലം ലഭിക്കുന്നത് കാരണം അവർ ഒരു വെബ്സൈറ്റിൽ പലതവണ ഉപയോഗിക്കാൻ പാടില്ല. ഒരൊറ്റ പേജിൽ വളരെയധികം ഇമേജ് മാപ്പുകൾ ഒരു ഗുരുതരമായ വീഴ്ചയും സൈറ്റ് പ്രകടനത്തിൻറെ ഭീമമായ ആഘാതം സൃഷ്ടിക്കും.

അവസാനമായി, ദൃശ്യ പ്രശ്നങ്ങൾ ഉള്ള ഉപയോക്താക്കൾക്ക് ആക്സസ് ചെയ്യാൻ എളുപ്പമല്ല ഇമേജ് മാപ്പുകൾ. നിങ്ങൾ ഇമേജ് മാപ്പുകൾ ഉപയോഗിച്ചിട്ടുണ്ടെങ്കിൽ, ബദലായി ഈ ഉപയോക്താക്കൾക്കായി മറ്റൊരു നാവിഗേഷൻ സിസ്റ്റവും സൃഷ്ടിക്കേണ്ടതുണ്ട്.

താഴത്തെ വരി

ഞാൻ ഡിസൈൻ ഒരു ദ്രുത ഡെമോ ഒരുക്കുന്ന എങ്ങനെ പ്രവർത്തിക്കുന്നു എപ്പോൾ കാലാകാലങ്ങളിൽ ഇമേജ് മാപ്പുകൾ ഉപയോഗിക്കുന്നു എങ്ങനെ പ്രവർത്തിക്കുന്നു. ഉദാഹരണത്തിന്, ഞാൻ ഒരു മൊബൈൽ അപ്ലിക്കേഷനായ രൂപകൽപനയെ പരിഹസിച്ചേക്കാം, ആപ്ലിക്കേഷന്റെ പ്രവർത്തനക്ഷമതയെ അനുകരിക്കുന്നതിന് ഹോട്ട്സ്പോട്ടുകൾ സൃഷ്ടിക്കാൻ ഇമേജ് മാപ്പുകൾ ഉപയോഗിക്കാൻ ഞാൻ ആഗ്രഹിക്കുന്നു. ഇത് ആപ്പിനെ കുറിക്കുന്നതിനേക്കാൾ എളുപ്പമാണ്, അല്ലെങ്കിൽ HTML, CSS എന്നിവ ഉപയോഗിച്ച് നിലവിലെ മാനദണ്ഡങ്ങൾക്കായി നിർമ്മിച്ച ഡമ്മി വെബ്പേജുകൾ നിർമ്മിക്കുക പോലും. ഈ നിർദ്ദിഷ്ട ഉദാഹരണത്തിൽ, ഞാൻ ഏത് ഉപകരണത്തെ ഡിസൈൻ ചെയ്താലും ആ ഉപാധിയിലേക്ക് കോഡ് സ്കെയിൽ ചെയ്യാമെന്ന് എനിക്കറിയാം, ഒരു ഇമേജ് മാപ്പ് പ്രവർത്തിക്കുന്നു, എന്നാൽ ഒരു ഉൽപ്പാദന സൈറ്റിലേക്കോ ആപ്ലിക്കേഷനിലേക്കോ ഉള്ളതുകൊണ്ട് അവ വളരെ തന്ത്രപൂർവം പ്രയോഗിക്കുന്നു, ഒപ്പം ഇന്നത്തെ വെബ്സൈറ്റുകൾ.

ജെന്നിഫർ ക്രിയിൻ എഴുതിയ ലേഖനം എഡിറ്റു ചെയ്തത് ജെറമി ഗിർാർഡ് 9/7/17 ന്.