এক্সএইচটিএমএল (XHTML)-এ ইমেজ ম্যাপ এবং ক্লিকেবল ইমেজ তৈরি করা সম্ভব। এই টেকনিকগুলো ব্যবহার করে একটি ইমেজের ভেতরে বিভিন্ন অংশকে ক্লিকযোগ্য লিঙ্কে পরিণত করা যায়। এক্সএইচটিএমএল গঠন অনুসরণ করে, এটি করতে হলে কিছু নির্দিষ্ট নিয়ম মেনে চলতে হয়।
১. ইমেজ ম্যাপ (Image Map) কী?
ইমেজ ম্যাপ একটি HTML উপাদান যা একটি চিত্রের নির্দিষ্ট অংশে লিঙ্ক তৈরি করার সুযোগ দেয়। অর্থাৎ, একটি ইমেজের বিভিন্ন অঞ্চলে আলাদা আলাদা লিঙ্ক নির্ধারণ করা যায়। এক্সএইচটিএমএল (XHTML)-এ ইমেজ ম্যাপ তৈরির জন্য <map> এবং <area> ট্যাগ ব্যবহার করা হয়।
১.১ ইমেজ ম্যাপ তৈরির উদাহরণ
এখানে একটি সিম্পল ইমেজ ম্যাপের উদাহরণ দেওয়া হলো, যেখানে একটি ইমেজের দুইটি ভিন্ন অংশ ক্লিকযোগ্য করা হয়েছে:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>Image Map Example</title>
</head>
<body>
<h1>Image Map Example</h1>
<img src="world-map.jpg" usemap="#map1" alt="World Map" />
<map name="map1">
<area shape="rect" coords="34,44,270,350" alt="North America" href="https://en.wikipedia.org/wiki/North_America" />
<area shape="circle" coords="450,150,50" alt="Europe" href="https://en.wikipedia.org/wiki/Europe" />
</map>
</body>
</html>
১.২ কোড বিশ্লেষণ:
<img>ট্যাগ: ইমেজের সোর্স নির্ধারণ করা হয় এবংusemapঅ্যাট্রিবিউটের মাধ্যমেmap1নামক ম্যাপটি ব্যবহার করা হয়।<map>ট্যাগ: এটি একটি ম্যাপের ডেফিনিশন করে।nameঅ্যাট্রিবিউটটিusemapএর সাথে মিলতে হবে, যাতে ইমেজটি এই ম্যাপের সাথে যুক্ত হয়।<area>ট্যাগ: এর মাধ্যমে ইমেজের নির্দিষ্ট অংশে লিঙ্ক তৈরি করা হয়।shapeঅ্যাট্রিবিউটটি ইমেজের অংশের গঠন (যেমনrectবাcircle) নির্ধারণ করে, এবংcoordsঅ্যাট্রিবিউটটি সেই অংশের স্থানাঙ্ক নির্ধারণ করে।shape="rect": একটি আয়তক্ষেত্র আকৃতির এলাকা।shape="circle": একটি বৃত্তাকার এলাকা।
coords: এটি লিঙ্কের কোঅর্ডিনেট সিস্টেমের তথ্য প্রদান করে। rect শেপের জন্য এটি চারটি মান নেয় (বাম, উপরের, ডান, নিচের কোণ)। circle শেপের জন্য এটি তিনটি মান নেয় (X, Y এবং ব্যাসার্ধ)।
২. ক্লিকেবল ইমেজ (Clickable Image)
একটি ক্লিকেবল ইমেজ তৈরি করার জন্য সাধারণত ইমেজকে একটি লিঙ্কের মধ্যে র্যাপ করা হয়। এক্সএইচটিএমএল (XHTML)-এ এটি করতে হলে <a> ট্যাগ ব্যবহার করা হয়, যা ইমেজটিকে একটি লিঙ্কে পরিণত করে।
২.১ ক্লিকেবল ইমেজের উদাহরণ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>Clickable Image Example</title>
</head>
<body>
<h1>Clickable Image Example</h1>
<a href="https://www.example.com">
<img src="clickable-image.jpg" alt="Clickable Image" />
</a>
</body>
</html>
২.২ কোড বিশ্লেষণ:
<a>ট্যাগ: এটি একটি লিঙ্ক তৈরি করে এবংhrefঅ্যাট্রিবিউটের মাধ্যমে গন্তব্য URL নির্দেশ করে।<img>ট্যাগ: এটি ইমেজটিকে পেজে প্রদর্শন করে, এবং এটি<a>ট্যাগের মধ্যে রাখা হয়েছে, যার ফলে ইমেজটি ক্লিক করা হলে সেই URL-এ নিয়ে যাবে।
এই পদ্ধতিতে, ইমেজটি পুরোপুরি ক্লিকযোগ্য হয়ে ওঠে এবং ব্যবহারকারী যখন সেই ইমেজের উপর ক্লিক করবে, তখন তাকে নির্দিষ্ট URL-এ নিয়ে যাবে।
৩. ইমেজ ম্যাপ এবং ক্লিকেবল ইমেজের পার্থক্য
- ইমেজ ম্যাপ: এটি একটি ইমেজের বিভিন্ন অংশকে আলাদা আলাদা লিঙ্কে পরিণত করে। ব্যবহারকারীরা ইমেজের নির্দিষ্ট অংশে ক্লিক করলে তারা আলাদা আলাদা ওয়েব পেজে চলে যাবে।
- ক্লিকেবল ইমেজ: এটি পুরো ইমেজটিকে একটি লিঙ্কে পরিণত করে, যার ফলে পুরো ইমেজটি ক্লিক করলে নির্দিষ্ট URL-এ নিয়ে যাবে।
এক্সএইচটিএমএল (XHTML)-এ ইমেজ ম্যাপ এবং ক্লিকেবল ইমেজ তৈরি করা খুবই সহজ এবং কার্যকরী। ইমেজ ম্যাপ ব্যবহার করে একটি ইমেজের বিভিন্ন অংশে লিঙ্ক তৈরি করা সম্ভব, যা ইন্টারেক্টিভ ওয়েব ডিজাইন তৈরি করতে সাহায্য করে। অন্যদিকে, ক্লিকেবল ইমেজ তৈরি করা হলে পুরো ইমেজটিই একটি লিঙ্কে পরিণত হয়ে যায়, যা ব্যবহারকারীর জন্য সহজ এবং দ্রুত ব্রাউজিং অভিজ্ঞতা তৈরি করে।
Read more
