HTML ইমেজ ম্যাপিং হলো ক্লায়েন্ট-সাইড ইমেজ-ম্যাপ যেখানে ক্লিকযোগ্য এলাকা থাকে যা HTML ডকুমেন্টে হাইপারলিংক হিসেবে কাজ করে। map এবং img HTML এলিমেন্টের মধ্যে সম্পর্ক স্থাপন করতে map এলিমেন্টের name অ্যাট্রিবিউটকে img এর usemap অ্যাট্রিবিউটের সাথে সংযুক্ত করা হয়।
সিনট্যাক্স
নিচে সিনট্যাক্স দেওয়া হলো:
<img src=”” alt=”’ usemap=”#name_value”> <map name=”name_value”> <area shape=”” coords=”” href=”” alt=”’> <area shape=”” coords=”” href=”” alt=”’> </map>
HTML ইমেজ ম্যাপিং এর একটি উদাহরণ দেখা যাক:
উদাহরণ
<!DOCTYPE html> <html> <head> <style> body { color: #000; height: 100vh; background-color: #FBAB7E; background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%); text-align: center; } img { width: 200px; height: 200px; } </style> </head> <body> <h1>HTML ইমেজ ম্যাপিং</h1> <img src="https://www.tutorialspoint.com/hadoop/images/hadoop-mini-logo.jpg" alt="Hadoop শিখুন" usemap="#hadoopImg"> <map name="hadoopImg"> <area shape="rect" coords="0,0,400,100" alt="Hadoop লোগো" href="https://www.tutorialspoint.com/hadoop/images/hadoop.jpg" width="100" height="100"> </map> <p>উপরের লোগোতে ক্লিক করুন</p> </body> </html>আউটপুট
ইমেজে Hadoop-এর লোগো অংশে (হাতি) ক্লিক করুন HTML ইমেজ ম্যাপিং কীভাবে কাজ করে তা লক্ষ্য করতে:
