বিশ্বের সবচেয়ে বড় বাংলা ওয়েব ডেভেলোপার সাইট
এইচটিএমএল ইমেজ ম্যাপের সাহায্যে আপনি একটি ছবিতে ক্লিকযোগ্য এলাকা তৈরি করতে পারেন। সাধারণত একটি ছবি সম্পূর্ণ একটি লিঙ্কের মতো কাজ করে, কিন্তু ইমেজ ম্যাপ ব্যবহার করলে সেই ছবির বিভিন্ন এলাকাকে বিভিন্ন লিঙ্কে রূপান্তর করা যায়। এর ফলে ব্যবহারকারী ছবির নির্দিষ্ট অংশে ক্লিক করে বিভিন্ন পেজ বা সেকশনে যেতে পারেন।
ইমেজ ম্যাপ তৈরি করতে HTML এর <map> ট্যাগ এবং <area> ট্যাগ ব্যবহৃত হয়। map ট্যাগে name অ্যাট্রিবিউট সেট করা হয় যা ছবির সাথে সংযুক্ত করা হয় এবং area ট্যাগগুলোতে বিভিন্ন আকারের ক্লিকযোগ্য অংশ নির্ধারণ করা হয়।
চলুন একটি উদাহরণের মাধ্যমে ইমেজ ম্যাপ বুঝে নিই। ধরুন, আপনার কাছে একটা ছবি আছে যেখানে একটা কম্পিউটার, একটা কিবোর্ড এবং একটা মাউস আছে। এখন আপনি চান কম্পিউটার, কিবোর্ড অথবা মাউস-এ ক্লিক করলে সেগুলোর বিস্তারিত তথ্য দেখানো হবে।
এখানে ইমেজ ম্যাপ-এর HTML কোড গুলো দেওয়া হলো
কোনো ছবি দেখানোর জন্য আমরা <img> ট্যাগ ব্যবহার করি। অন্যান্য ইমেজ এবং ইমেজ ম্যাপের মধ্যে শুধুমাত্র পার্থক্য আপনাকে একটি usemap এট্রিবিউট যোগ করতে হবে:
usemap মানটি একটি হ্যাশ ট্যাগ # দিয়ে শুরু হয় যার পরে ইমেজ ম্যাপের নাম থাকে এবং ইমেজ এবং ইমেজ ম্যাপের মধ্যে সম্পর্ক তৈরি করতে ব্যবহৃত হয়। উপরে যেমনটা দেখতে পাচ্ছেন।
তারপর, একটি <map> এলিমেন্ট যোগ করুন।
<map> এলিমেন্টি একটি ইমেজ ম্যাপ তৈরি করতে ব্যবহৃত হয়, এবং প্রয়োজনীয় name এট্রিবিউট ব্যবহার করে ছবির সাথে লিঙ্ক করা হয়:
name অ্যাট্রিবিউটের মান অবশ্যই <img> এর usemap অ্যাট্রিবিউটের মান সমান থাকতে হবে।
তারপরে, ক্লিকযোগ্য এলাকা যোগ করুন।।
একটি ক্লিকযোগ্য এলাকা একটি <area> এলিমেন্ট ব্যবহার করে সংজ্ঞায়িত করা হয়।
shape: তিনটি ভিন্ন আকার হতে পারে — rect (আয়তক্ষেত্র), circle (বৃত্ত), এবং poly (বহুভুজ)।coords: এখানে নির্দিষ্ট পয়েন্টের স্থানাঙ্ক (coordinates) উল্লেখ করা হয়, যা shape অনুযায়ী ভিন্ন হয়।href: এখানে গন্তব্য পেজের URL উল্লেখ করা হয়, যাতে ক্লিক করলে সেই পেজে যাওয়া যায়।alt: ক্লিকযোগ্য অংশের বিকল্প টেক্সট যা ছবি না দেখা গেলে প্রদর্শিত হয়।shape="rect"-এর স্থানাঙ্কগুলি জোড়ায় আসে, একটি x-অক্ষের জন্য এবং অন্যটি y-অক্ষের জন্য।
সুতরাং, স্থানাঙ্ক 20,85 দ্বারা বুঝানো হয়েছে বাম থেকে 20 পিক্সেল এবং উপরে থেকে 85 পিক্সেল অবস্থিত:
স্থানাঙ্ক 322,307 দ্বারা বুঝানো হয়েছে বাম থেকে 322 পিক্সেল এবং উপরে থেকে 307 পিক্সেল অবস্থিত:
এখন আমাদের কাছে ক্লিকযোগ্য আয়তক্ষেত্রাকার এলাকা তৈরি করার জন্য যথেষ্ট ডেটা রয়েছে:
এই অংশটি ক্লিকযোগ্য হবে এবং ব্যবহারকারীকে "computer.htm" পৃষ্ঠায় নিয়ে যাবে যখন এই অংশে ক্লিক করবে।
এখানে মাউসটিকে বৃত্ত সেপ দেওয়া হবে
একটি বৃত্ত এলাকা যোগ করতে, প্রথমে বৃত্তের কেন্দ্রের স্থানাঙ্কগুলি সনাক্ত করতে হবে:
যেমন, স্থানাঙ্ক 288,359 দ্বারা মাউসের কেন্দ্র বুঝানো হয়েছে
তারপর বৃত্তের ব্যাসার্ধ নির্দিষ্ট করুন:
16 pixels
এখন আপনার কাছে একটি ক্লিকযোগ্য বৃত্তাকার এলাকা তৈরি করার জন্য যথেষ্ট ডেটা আছে:
এটি সেই এলাকা যা ক্লিকযোগ্য হয়ে ওঠে এবং ব্যবহারকারীকে "mouse.htm" পৃষ্ঠায় পাঠাবে যখন ওই এলাকায় ক্লিক করা হবে:
