কী জানতে হবে
• একটি সাধারণ আকারের ছবি ব্যবহার করুন যা ব্রাউজার রিস্কেল করবে না। আপনার একটি ইমেজ এডিটর এবং একটি এইচটিএমএল বা টেক্সট এডিটরও লাগবে।
• চিত্রটি সন্নিবেশ করার সময়, মানচিত্রের স্থানাঙ্কগুলি সনাক্ত করতে একটি অতিরিক্ত বৈশিষ্ট্য যুক্ত করুন৷
• যেমন:
এই নিবন্ধটি ব্যাখ্যা করে কিভাবে চিত্র মানচিত্র সম্পাদকের পরিবর্তে HTML ট্যাগ ব্যবহার করে চিত্র মানচিত্র তৈরি করা যায়। বেশিরভাগ ইমেজ এডিটররা আপনাকে আপনার মাউসের স্থানাঙ্ক দেখাবে যখন আপনি ছবিটিতে নির্দেশ করবেন, যা ইমেজ ম্যাপ দিয়ে শুরু করার জন্য আপনার প্রয়োজনীয় সমস্ত ডেটা।
একটি চিত্র মানচিত্র তৈরি করা হচ্ছে
একটি চিত্র মানচিত্র তৈরি করতে, প্রথমে একটি চিত্র নির্বাচন করুন যা মানচিত্রের ভিত্তি হিসাবে কাজ করবে। চিত্রটি "স্বাভাবিক আকার" হওয়া উচিত-অর্থাৎ, আপনার এত বড় ছবি ব্যবহার করা উচিত নয় যাতে ব্রাউজার এটিকে স্কেল করে।
যখন আপনি ছবিটি সন্নিবেশ করবেন, তখন আপনি একটি অতিরিক্ত বৈশিষ্ট্য যোগ করবেন যা মানচিত্রের স্থানাঙ্কগুলি সনাক্ত করে:
যখন আপনি একটি চিত্র মানচিত্র তৈরি করেন, আপনি এমন একটি এলাকা তৈরি করছেন যা ছবিতে ক্লিকযোগ্য, তাই মানচিত্রের স্থানাঙ্কগুলি আপনার নির্বাচিত চিত্রের উচ্চতা এবং প্রস্থের সাথে সারিবদ্ধ হওয়া আবশ্যক৷ মানচিত্র তিনটি ভিন্ন ধরনের আকার সমর্থন করে:
- আয়তক্ষেত্র-একটি আয়তক্ষেত্র বা চারমুখী চিত্র
- পলি-একটি বহুভুজ বা বহুমুখী চিত্র
- বৃত্ত-একটি বৃত্ত
ক্ষেত্রগুলি তৈরি করতে, আপনাকে অবশ্যই নির্দিষ্ট স্থানাঙ্কগুলিকে আলাদা করতে হবে যা আপনি মানচিত্র করতে চান৷ একটি মানচিত্রের চিত্রে এক বা একাধিক সংজ্ঞায়িত এলাকা থাকতে পারে যেখানে ক্লিক করা হলে একটি নতুন হাইপারলিঙ্ক খুলবে৷
একটি আয়তক্ষেত্রের জন্য, আপনি উপরের বাম এবং নীচের ডানদিকের কোণগুলিকে ম্যাপ করুন৷ সমস্ত স্থানাঙ্ক x, y (ওভার, আপ) হিসাবে তালিকাভুক্ত করা হয়েছে। সুতরাং, উপরের বাম কোণে 0, 0 এবং নীচের ডান কোণে 10, 15 এর জন্য আপনি 0, 0, 10, 15 টাইপ করবেন। তারপর আপনি এটি মানচিত্রে অন্তর্ভুক্ত করুন:
বহুভুজের জন্য, আপনি প্রতিটি x, y স্থানাঙ্ক আলাদাভাবে ম্যাপ করেন। ওয়েব ব্রাউজার স্বয়ংক্রিয়ভাবে স্থানাঙ্কের শেষ সেটটিকে প্রথমটির সাথে সংযুক্ত করে; এই স্থানাঙ্কের ভিতরে যা কিছু আছে তা মানচিত্রের অংশ।
বৃত্তের আকারগুলির জন্য আয়তক্ষেত্রের মতো শুধুমাত্র দুটি স্থানাঙ্কের প্রয়োজন, কিন্তু দ্বিতীয় স্থানাঙ্কের জন্য, আপনি বৃত্তের কেন্দ্র থেকে ব্যাসার্ধ বা দূরত্ব নির্দিষ্ট করুন৷ সুতরাং, 122, 122 এবং 5 এর ব্যাসার্ধ কেন্দ্র বিশিষ্ট একটি বৃত্তের জন্য আপনি 122, 122, 5 লিখবেন:
সমস্ত এলাকা এবং আকার একই মানচিত্রের ট্যাগে অন্তর্ভুক্ত করা যেতে পারে:
বিবেচনা
চিত্র মানচিত্রগুলি 1990-এর দশকের ওয়েব 1.0 যুগে 2000-এর দশকের গোড়ার দিকে অনেক বেশি সাধারণ ছিল-ইমেজ ম্যাপগুলি প্রায়শই একটি ওয়েবসাইটের নেভিগেশনের ভিত্তি তৈরি করে। একজন ডিজাইনার মেনু আইটেমগুলি নির্দেশ করার জন্য কিছু ধরণের ছবি তৈরি করবেন, তারপর একটি মানচিত্র সেট করবেন।
আধুনিক পদ্ধতিগুলি প্রতিক্রিয়াশীল ডিজাইনকে উত্সাহিত করে এবং একটি পৃষ্ঠায় চিত্র এবং হাইপারলিঙ্ক স্থাপন নিয়ন্ত্রণ করতে ক্যাসকেডিং স্টাইল শীট ব্যবহার করে৷
যদিও মানচিত্র ট্যাগটি এখনও HTML স্ট্যান্ডার্ডে সমর্থিত, ছোট আকারের ফ্যাক্টর সহ মোবাইল ডিভাইসের ব্যবহার চিত্র মানচিত্রের সাথে অপ্রত্যাশিত কর্মক্ষমতা সমস্যা হতে পারে। উপরন্তু, ব্যান্ডউইথ সমস্যা বা ভাঙা ছবি একটি ইমেজ ম্যাপের মানকে প্রভাবিত করে।
সুতরাং, নির্দ্বিধায় এই স্থিতিশীল, ভালভাবে বোধগম্য প্রযুক্তি ব্যবহার করা চালিয়ে যান-জানেন যে ওয়েব ডিজাইনারদের কাছে বর্তমানে আরও কার্যকর বিকল্প রয়েছে৷
