এইচটিএমএল <area> ট্যাগ
<area> ট্যাগের ব্রাউজার সাপোর্ট
| এলিমেন্ট | Google Chrome | Edge/IE | Mozila Firefox | Safari | Opera |
|---|---|---|---|---|---|
<area> |
সকল ভার্সন | সকল ভার্সন | সকল ভার্সন | সকল ভার্সন | সকল ভার্সন |
সংজ্ঞা ও ব্যবহার
<area> ট্যাগ দ্বারা ইমেজ-ম্যাপ এর ভিতর একটি এরিয়াকে নির্দেশ করে (ইমেজ-ম্যাপ হলো একটি ইমেজ যেটিতে ক্লিকযোগ্য এরিয়া রয়েছে)।
<area> এলিমেন্ট সবসময় <map> এলিমেন্টের মধ্যে থাকে।
নোটঃ <img> ট্যাগের usemap এট্রিবিউট <map> এলিমেন্টের name এট্রিবিউট এর সঙ্গে যুক্ত করে। ফলে ইমেজ এবং ম্যাপ এর মধ্যে একটি সম্পর্ক তৈরী হয়।
ক্লিক এরিয়াসহ একটি ইমেজ-ম্যাপ তৈরি করে নিচের উদাহরণে দেখানো হলোঃ
উদাহরণ
<!DOCTYPE html>
<html>
<body>
<p>সূর্য অথবা নক্ষত্রগুলো ক্লিক করলে অনেক কাছে দেখাবে।</p>
<img src="images/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.html">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.html">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.html">
</map>
</body>
</html>
ফলাফল
এট্রিবিউট
নিচের টেবিলে <area> ট্যাগের এট্রিবিউট, এট্রিবিউটের ভ্যালু এবং তাদের ব্যবহার তুলে ধরা হলোঃ
| এট্রিবিউট | ভ্যালু | বর্ণনা |
|---|---|---|
| alt | text | যদি href এট্রিবিউট থাকে তবে এরিয়াটির জন্য একটি বিকল্প টেক্সট নির্ধারন করে। |
| coords | coordinates | কো-অর্ডিনেট এরিয়া নির্ধারন করে। |
| download | filename | যখন একজন ব্যবহারকারী হাইপারলিংক ক্লিক করবে তখন নির্দিষ্ট ফাইলটি ডাউনলোড হবে। |
| href | URL | হাইপারলিংক এর টার্গেট এরিয়া নির্ধারন করে। |
| hreflang | language_code | টার্গেট URL এর ভাষা নির্দেশ করে। |
| media | media query | কি ধরনের মিডিয়া/ডিভাইস এ টার্গেট URL টি অপ্টিমাইজ করা হয়েছে তা নির্দেশ করে। |
| nohref | value | এইচটিএমএল(৫) এ সমর্থন করে না। এমন একটি এরিয়া নির্দেশ করে যার সংশ্লিষ্ট কোন লিংক নেই। |
| rel | alternate author bookmark help license next nofollow noreferrer prefetch prev search tag |
বর্তমান ডকুমেন্ট এবং টার্গেট URL এর মধ্যে সম্পর্ক নির্দেশ করে। |
| shape |
default rect circle poly |
এরিয়ার আকৃতি নির্দেশ করে। |
| target | _blank _parent _self _top framename |
টার্গেট URL কোথায় ওপেন হবে তা নির্দেশ করে। |
| type | media_type | টার্গেট URL এর মিডিয়ার ধরন নির্দেশ করে। |
<area> ট্যাগে গ্লোবাল এবং ইভেন্ট এট্রিবিউট সাপোর্ট করে কিনা?
| গ্লোবাল এট্রিবিউট | ইভেন্ট এট্রিবিউট |
|---|---|
| সাপোর্ট করে | সাপোর্ট করে |
<area> ট্যাগের ডিফল্ট সিএসএস স্টাইল
অধিকাংশ ব্রাউজারে <area> এলিমেন্টটি নিমোক্ত ডিফল্ট সিএসএস ভ্যালুগুলো সহকারে প্রদর্শিত হয়ঃ
area {
display: none;
}