এইচটিএমএল সিএসএস জাভাস্ক্রিপ্ট পিএইচপি এসকিউএল জেকুয়েরি বুটস্ট্রাপ সি প্রোগ্রামিং
ফোরাম
 

এইচটিএমএল <map> ট্যাগ


<map> ট্যাগের ব্রাউজার সাপোর্ট



এলিমেন্ট Google Chrome Edge/IE Mozila Firefox Safari Opera
<map> সকল ভার্সন সকল ভার্সন সকল ভার্সন সকল ভার্সন সকল ভার্সন




সংজ্ঞা এবং ব্যবহার

ক্লাইন্ট-সাইড ইমেজ-ম্যাপ সংজ্ঞায়িত করতে <map> ট্যাগ ব্যবহার করা হয়। ইমেজ-ম্যাপ হলো একটি ইমেজ যেটিতে ক্লিকযোগ্য এরিয়া রয়েছে।

<map> এলিমেন্টের আবশ্যক name এট্রিবিউটটি <img> এলিমেন্টের usemap এট্রিবিউটের মাধ্যমে সংযুক্ত হয়ে ইমেজ এবং ম্যাপ এর মধ্যে সম্পর্ক স্থাপন করে।

<map> এলিমেন্ট <area> এলিমেন্টটির ধারক। অর্থাৎ একটি ইমেজ-ম্যাপের ক্ষেত্রে <map> এলিমেন্টের মধ্যে যতোটি <area> এলিমেন্ট রাখা হবে, ইমেজ-ম্যাপে ততোগুলো ক্লিক এরিয়া তৈরি হবে।



ক্লিক এরিয়াসহ একটি ইমেজ-ম্যাপ তৈরি করে নিচের উদাহরণে দেখানো হলোঃ

উদাহরণ

<!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>

ফলাফল





এট্রিবিউট

নিচের টেবিলে <map> ট্যাগের এট্রিবিউট, এট্রিবিউটের ভ্যালু এবং তাদের ব্যবহার তুলে ধরা হলোঃ

এট্রিবিউট ভ্যালু বর্ণনা
name mapname আবশ্যক। ইমেজ-ম্যাপের জন্য একটি নাম নির্ধারন করে।


<map> ট্যাগে গ্লোবাল এবং ইভেন্ট এট্রিবিউট সাপোর্ট করে কিনা?

গ্লোবাল এট্রিবিউট ইভেন্ট এট্রিবিউট
সাপোর্ট করে সাপোর্ট করে


<map> ট্যাগের ডিফল্ট স্টাইল

অধিকাংশ ব্রাউজারেই <map> এলিমেন্ট নিম্নলিখিত স্টাইল ভ্যালুগুলো সহকারে প্রদর্শিত হয়ঃ

map {
    display: inline;
  }


সম্পর্কিত পেজ