area ট্যাগ ও map ট্যাগের ব্যবহার উদাহরন সহ

map ট্যাগ এবং area ট্যাগ এই দুটো আসলে একে অপরের সাথে কানেক্টটেড। অনেকটা ul li এবং ol li এই দুইটো ট্যাগের সাথে সর্ম্পকের মতো। যেমন এর আগে আমরা দেখিয়েছি ul, ol ট্যাগের মধ্যে অবশ্যয় li ট্যাগ ব্যবহার হয়। ঠিক একি ভাবে map ট্যাগের মধ্যে area ট্যাগ ঢুকবে। আমরা আসলে দুটো ট্যাগ নিয়ে আলোচনা করবো map এবং area ট্যাগ।

area ট্যাগ ও map ট্যাগের ব্যবহার

map এ area ট্যাগ ব্যবহার করে ম্যাপিং করা হয় । ছবির বিভিন্য অংশ গুলো লিংক করা যায় map tag ও area tag ব্যবহার করে । নিচের ছবিটি দেখুন । পৃথিবী ও চাঁদ কে বোঝানোর জন্য দুটি বৃত্ত আকা হয়েছে । এবং আমাদের ইচ্ছা যে পৃথিবী ও চাঁদ কে আমরা লিংক করবো অন্য পেজের সাথে ।

 

 

উপরের ইমেজে Earth এর বৃত্তে মাউচ নিয়ে যান , দেখবেন কোন লিংক নেই । একই ভারে Moon এর উপারেও নেই । কিন্তু আমরা চাচ্ছি লিংক করতে । দেখুন নিচের ইমেজ টি । দেখবেন যে Earth circle এর উপর মাউস নিয়ে দেখাচ্ছে Earth এবং মাউচ পয়েন্টার টি পরিবর্তন হয়ে হাতের মতো ধারন করেছে । ঠিক একই রকম Moon এর ক্ষেত্রে ও ।

 

 

area এবং map ট্যাগের উদাহরণ

চলুন আগে দেখে নেয়া যাক উপরের এরিয়া ও ম্যাপ ট্যাগ ব্যবহৃত ইমেজের কোড গুলো দেখে নেই ।

 <img src="Earth-moon.jpg" usemap="#earthmoonmap">
 <map name="earthmoonmap"> 
    <area shape="circle" coords="142 142 125" alt="Earth" href="#"> 
    <area shape="circle" coords="404 148 59" alt="Moon" href="#"> 
 </map>

Try it now

এবার ধাপে ধাপে আলোচনা করে নেয়া যাক কার কি কাজ।

ট্যাগ এট্রিবিউট ব্যবহার ব্যাখ্যা

উপরের কোড এ দেখুন map ট্যাগ এর এট্রিবিউট আকারে আছে name ও  এট্রিবিউট ভেলু আকারে আছে। আবার এর map ট্যাগের উপরে img tag দিয়ে একটি ইমেজ নেয়া হয়েছে এবং এর একটি এট্রিবিউট  usemap আছে যার ভেলু (#earthmoonmap) map ট্যাগ এর এট্রিবিউট ভেলু  (earthmoonmap) একই। শুধু usemap এর ক্ষেত্রে একটি # সাইন দেয়া আছে । এর মাধ্যমে map ট্যাগ টি কোন image এ কাজ করবে তা ঠিক করে দেয়া হয়।

<area shape="circle" coords="142 142 125" alt="Earth" href="#">

এবার আশা যাক area ট্যাগ এর বিভিন্য এট্রিবিউট গুলো নিয়ে । area ট্যাগের পুরো এট্রিবিউট লিস্ট নিয়ে পরে আলোচনা করছি । আগে আলোচনা করি shape ও coords নিয়ে । এরা রিলেশনাল কারন shape এর ভেলুর উপর নির্ভর করে coords এর ভলু কতগুলো হবে । যেমন এপরের লাইন এ shape attribute এর ভেলু circle থাকায় coords এর ভেলু তিন টি ( প্রথম টি x axis, দ্বিতীয় টি  y axis আর শেষেরটি circle radius প্রকাশ করে ) । যদি shape attribute এর ভেলু  rect হত, তাহলে coords এর ভেলু চার টি হত ।

area ট্যাগের এট্রিবিউট গুলো

Attribute	Value	Description
alt	text	Alternate Text নির্দেশ করে একটি এরিয়ার এবং লাগবেই যদি href attribute টি থাকে area ট্যাগ এর সাথে
coords	coordinates	এরিয়া ট্যাগ টি কতখানি এরিয়া জুরে থাকবে তা বলে দেয় এবং এর ভেলু গুলো নির্ভর করে shape attribute এর উপর । উপরের উদাহরন টি দেখুন
download	finename	যদি এরিয়া ট্যাগ দ্বারা আবদ্ধ অংশে ক্লিক করলে কোন ফাইল ডাউনলোড করাতে চাই, তাহলে এই এট্ট্রিবিউট ব্যবহার হয় ।
href	URL	বলে দেয় কোন পেজে যাবে এরিয়াতে ক্লিক করলে
hreflang	language_code	বলে দেয় এরিয়াতে ক্লিক করলে যে পেজে যাবে তার ভাষা
media	media query	বলে দেয় এরিয়াতে ক্লিক করলে যে পেজে যাবে সেটি কোন media / devise এর জন্য optimize করা ।
rel	alternate author bookmark help license next nofollow noreferrer prefetch prev search tag	বলে দেয় এরিয়াতে ক্লিক করলে যে পেজে যাবে সেই পেজ এবং এই পেজের মধ্যে সম্পর্ক কি
shape	defaul rect circle poly	ঠিক করে দেয় এরিয়ার ধরন কেমন হবে ।
target	_blank _parent _self _top framename	ঠিক করে দেয় নতুন লিংকটি কিভাবে ওপেন হবে, যেমন _blank থাকলে নতুন ট্যাব ওপেন করে ওপেন হয় ।
type	media_type	ঠিক করে দেয় target URL এর মিডিয়া টাইপ কি হবে ।