জাভাস্ক্রিপ্ট ব্যবহার করে ক্লায়েন্ট-সাইড ইমেজ ম্যাপ তৈরি করা

জাভাস্ক্রিপ্ট ব্যবহার করে ক্লায়েন্ট-সাইড ইমেজ ম্যাপ তৈরি করুন। ক্লায়েন্ট-সাইড ইমেজ ম্যাপ <img /> ট্যাগের usemap অ্যাট্রিবিউট এবং স্পেশাল <map> ও <area> এক্সটেনশন ট্যাগ দ্বারা ডিফাইন করা হয়।

ম্যাপ তৈরির জন্য যেই ইমেজটি ব্যবহার করা হবে, সেটি নরম্যালি <img /> এলিমেন্ট দিয়ে পেজে ইনসার্ট করা হয়, সেটি শুধু একটি এক্সট্রা অ্যাট্রিবিউট usemap ক্যারি করে। usemap অ্যাট্রিবিউটের ভ্যালু হলো <map> এলিমেন্টের name অ্যাট্রিবিউটের ভ্যালু, যেটি আপনি ভাববেন, সেটির আগে একটি পাউন্ড বা হ্যাশ সাইন থাকে।

উদাহরণ

নিচের কোডটি চালিয়ে ক্লায়েন্ট-সাইড ইমেজ ম্যাপ তৈরি করা শিখুন:

<html>    <head>       <title>Using JavaScript Image Map</title>       <script type="text/javascript">          <!--             function showTutorial(name) {                document.myform.stage.value = name             }          //-->       </script>    </head>    <body>       <form name="myform">          <input type = "text" name = "stage" size = "20" />       </form>       <!-- Create Mappings -->       <img src="/images/usemap.gif" alt="HTML Map" 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="_self"             onMouseOver="showTutorial('perl')"             onMouseOut="showTutorial('')"/>          <area shape="rect"             coords="22,83,126,125"             href="/html/index.htm" alt="HTML Tutorial"             target="_self"             onMouseOver="showTutorial('html')"             onMouseOut="showTutorial('')"/>          <area shape="circle"             coords="73,168,32"             href="/php/index.htm" alt="PHP Tutorial"             target="_self"             onMouseOver="showTutorial('php')"             onMouseOut="showTutorial('')"/>       </map>    </body> </html>