ইমেজ ম্যাপ

এইচটিএমএল ইমেজ ম্যাপের সাহায্যে আপনি একটি ছবির উপরে কিছু অংশ ক্লিকযোগ্য করতে পারবেন ।

ইমেজ ম্যাপ

HTML <map> ট্যাগ টি ব্যবহার হয় ইমেজ ম্যাপ করার জন্য।  একটি ছবির ম্যাপটি ক্লিকযোগ্য এলাকা সহ একটি ছবি । অঞ্চলগুলি এক বা একাধিক <area> ট্যাগ দিয়ে সংজ্ঞায়িত করা হয়।

 

<img src="laptop-tea-cup.jpg" alt="Map Work" usemap="#mapwork"> 
<map name="mapwork"> 
 <area shape="circle" coords="492,317,47" alt="Cup" href="https://en.wikipedia.org/wiki/Cup"> 
 <area shape="rect" coords="174,46,425,368" alt="Laptop" href="https://kivabe.com/"> 
 <area shape="rect" coords="444,182,486,260" alt="Phone" href="https://mobile9.com/"> 
 <area shape="poly" coords="9,313,111,355,170,233,79,199" alt="Notebook" href="https://www.shutterstock.com/search/notebook" > 
</map>

নিজে চেষ্টা করুন

ইমেজ ম্যাপ কিভাবে কাজ করে?

ইমেজ ম্যাপিং এর ধারনা টা হচ্ছে একটি ইমেজের বিভিন্ন অংশ আলাদা আলাদা ভাবে ক্লিক যোগ্য করে তোলা ।

ইমেজ ম্যাপ করতে একটি ছবি লাগবে এবং কিছু কোড যা ক্লিক করার এরিয়া টি তৈরি করবে ।

ছবি নেয়া

ছবিটি সাধারন ইমেজ ইনসার্ট করার মতোই img ট্যাগ ব্যবহার করে নিতে হয় । তবে সেটিতে usemap নামে একটি অ্যাট্রিবিউট ব্যবহার করতে হয় ।

<img src="laptop-tea-cup.jpg" alt="Map Work" usemap="#mapwork">

usemap অ্যাট্রিবিউট টির ভ্যালু # দিয়ে শুরু হয় এবং এটি ইমেজ ও ম্যাপ এর মধ্যে একটি রিলেশন তৈরি করতে ব্যবহৃত হয় ।

আপনি ইমেজ ম্যাপ এর জন্য যে কোন ইমেজ ব্যবহার করতে পারেন ।

ইমেজ ম্যাপ তৈরি

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

<map name="mapwork">

name এর ভ্যালু অবশ্যই <img> ট্যাগ এর usemap এর ভ্যালুটি একই হতে হবে ।

ছবিতে এরিয়া তৈরি

এবার আমাদের ক্লিকেবল এডিয়া তৈরি করতে হবে ।

এবং এটি করা হয় aria এলিমেন্ট ব্যবহার করে ।

সেপ

আপনাকে অবশ্যই ক্লিক যগ্য এরিয়ার সেপ বলে দিতে হবে । আর আপনি নিচের যে কোন একটি ভ্যালু ব্যবহার করতে পারেন ।

• rect – defines a rectangular region
• circle – defines a circular region
• poly – defines a polygonal region
• default – defines the entire region

এবং এই সেপ গুলোর কোঅর্ডিনেট ঠিক করে দিতে হবে যা ক্লিক করার এরিয়া তৈরি করবে ।

Shape=”rect”

রেক্টাঙ্গল সেপ তৈরিকরে এবং এর মিনিমাম দুইটি বিন্দু থাকে । প্রতিটি বিন্দুর জন্য x  এবং y এর ভেলু থাকে।

তো নিচের ইমেজের ল্যাপটপ দির প্রথম বিন্দু টির কোঅর্ডিনেট হবে 174, 46 অর্থাৎ বিন্দুটি ছবিটির বাম পাশ থেকে ১৭৪ পিক্সেল দুরে এবং উপর থেকে ৪৬ পিক্সেল নিচে অবস্থিত । 

আর ২য় বিন্দুটির কোঅর্ডিনেট হবে 425, 368 অর্থাৎ বিন্দুটি ছবিটির বাম পাশ থেকে ৪২৫ পিক্সেল দুরে এবং উপর থেকে ২৬৮ পিক্সেল নিচে অবস্থিত ।

এবার আমরা পর্যাপ্ত জায়গা পাবো ছবির ল্যাপটপ টিকে লিংক করতে ।

<area shape="rect" coords="174,46,425,368" alt="Laptop" href="https://kivabe.com/">

নিজে চেষ্টা করুন

এটি যে এরিয়া ক্লিকেবল করবে সেটি নিচের নীল অংশের মতো

 

Shape=”circle”

ইমেজ ম্যাপিং এ circle area তৈরি করার জন্য শুরুতে অবজেক্ট এর সেন্টার নির্বাচন করুন এবং এর কোঅর্ডিনেট সেট করুন ।  আমরা কাপ প্রিজ এর জন্য circle area নির্বাচন করবো ।

কেন্দ্রটির কোর্ডিনেট 492, 317

এবার বের করতে হবে রেডিয়াস এবং সেটি 47 pixel

এবার সার্কেল তৈরির জন্য পর্যাপ্ত তথ্য আছে ।

<area shape="circle" coords="492,317,47" alt="Cup" href="https://en.wikipedia.org/wiki/Cup">

নিজে চেষ্টা করুন

 

Shape=”poly”

Polygon shape area সিলেক্ট করার জন্য shape=”poly” ব্যবহার করা হয় । কম পক্ষে তিন  টি বিন্দু লাগবে এবং এটি দিয়ে ত্রিভুজ চর্তুভজ সহ বিভিন্ন বহূভুজ সিলেক্ট করা যায়।

তো আমরা যদি ডায়েরি টি লিংক করতে চাই , তাহলে আমরা poly shape ব্যবহার করতে পারি । আর এটির জন্য চার টি বিন্দু লাগবে, সেগুলো  9,313  111,355  170,233  79,199

<area shape="poly" coords="9,313,111,355,170,233,79,199" alt="Notebook" href="https://www.shutterstock.com/search/notebook" >

 

Image Map এবং JavaScript

ইমেজ ম্যাপ এর মাধ্যমে জাভাস্ক্রিপ্ট ও ব্যবহার করা যায় ।

<area> ট্যাগ এ click event যোগ করে করা যাবে কাজটি ।

<img src="https://kivabe.com/codes/wp-content/uploads/2020/10/laptop-in-desk-with-tea-cup.jpg" alt="Map Work" usemap="#mapwork"> 
<map name="mapwork">  
  
  <area shape="circle" coords="492,317,47" alt="Cup"  onclick="myFunction()" >
    
</map>

<script>
  function myFunction() {
    alert("You clicked the coffee cup!");
  }
</script>

অধ্যায় এ যা পেলাম

• <map> elements এর ব্যবহার যা দিয়ে ইমেজ ম্যাপ করা যায়।
• <area> elememts এর ব্যবহার যা ইমেজ  এর বিভিন্য অংশ ক্লিক যোগ্য করে।
• <usemap>  attribute এর ব্যবহার যা দিয়ে ইমের ও ম্যাপ এর মধ্যে একটি সম্পর্ক তৈরি করে ।