<area> এলিমেন্টের coords অ্যাট্রিবিউট ইমেজ ম্যাপে এরিয়ার কোঅর্ডিনেট সেট করতে ব্যবহৃত হয়। shape অ্যাট্রিবিউটের সাথে ব্যবহার করে এরিয়ার আকার এবং সাইজ সেট করুন।
সিনট্যাক্স নিচের মত:
<area coords="value">
উপরের value-র অধীনে আপনি নিচের কোঅর্ডিনেটগুলো ভিন্ন প্যারামিটারসহ সেট করতে পারেন:
| x1,y1,x2,y2 | রেক্ট্যাঙ্গেলের (shape="rect") টপ-লেফট এবং বটম-রাইট কর্নারের কোঅর্ডিনেট |
| x,y,radius | সার্কেলের (shape="circle") সেন্টার এবং ব্যাসার্ধের কোঅর্ডিনেট |
| x1,y1,x2,y2,..,xn,yn | পলিগনের এজগুলোের কোঅর্ডিনেট। |
এখন <area> এলিমেন্টের coords অ্যাট্রিবিউট ইমপ্লিমেন্ট করার একটি উদাহরণ দেখি:
উদাহরণ
<!DOCTYPE html> <html> <body> <h2>Learning</h2> <p>Learn these technologies with ease....</p> <img src = /images/usemap.gif alt = "usemap" border = "0" usemap = "#tutorials"/> <map name = "tutorials"> <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>
আউটপুট
উপরের উদাহরণে, আমরা নিচের ইমেজে ম্যাপ সেট করেছি:
<img src = /images/usemap.gif alt = "usemap" border = "0" usemap = "#tutorials"/>
এখন, আমরা শেপের জন্য ম্যাপ এবং এর ভিতরে এরিয়া সেট করেছি:
<map name = "tutorials"> <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>
এরিয়া সেট করার সময়, আমরা coords অ্যাট্রিবিউট দিয়ে এরিয়ার কোঅর্ডিনেট সেট করেছি:
<area shape = "rect" coords = "22,83,126,125" alt = "HTML Tutorial" href = "/html/index.htm" target = "_blank" />
