HTML-এ ছবির নির্দিষ্ট অংশকে ক্লিকযোগ্য बनाने জন্য ইমেজ ম্যাপ (Image Map) ব্যবহার করা হয়। উদাহরণস্বরূপ, একই ছবির বক্সে ক্লিক করলে একটি ওয়েবসাইট খুলবে, আবার ত্রিভুজে ক্লিক করলে অন্য একটি ওয়েবসাইট খুলবে।
<area> ট্যাগ ছবির ভিতরে একটি এলাকা সংজ্ঞায়িত করে এবং এটি <map> ট্যাগের ভিতরে নেস্টেড থাকে। নিচে এর অ্যাট্রিবিউটগুলো দেওয়া হলো:
| ক্রম নং | অ্যাট্রিবিউট ও বর্ণনা |
|---|---|
| ১ | alt এলাকার জন্য বিকল্প টেক্সট |
| ২ | coords এলাকার কোঅর্ডিনেট |
| ৩ | download হাইপারলিংকে ক্লিক করলে টার্গেট ডাউনলোড হবে |
| ৪ | shape এলাকার আকার (rect, circle, poly) |
| ৫ | target URL কোথায় খুলবে (_blank, _self ইত্যাদি) |
উদাহরণ
নিচের কোড চালিয়ে HTML-এ ইমেজ ম্যাপ তৈরি করুন:
<!DOCTYPE html> <html> <head> <title>HTML area Tag</title> </head> <body> <img src = /images/usemap.gif alt = "usemap" usemap = "#lessons"/> <map name = "lessons"> <area shape = "poly" coords = "74,0,113,29,98,72,52,72,38,27" href = "/perl/index.htm" alt = "Perl Tutorial" target = "_blank" /> <area shape = "rect" coords = "22,83,126,125" alt = "HTML Tutorial" href = "/html/index.htm" target = "_blank" /> <area shape = "circle" coords = "73,168,32" alt = "PHP Tutorial" href = "/php/index.htm" target = "_blank" /> </map> </body> </html>
আউটপুট
