آموزش نقشه تصویر(Image Map) در HTML

تگ <map> در HTML، یک نقشه تصویری را تعریف می کند. یک نقشه تصویر، یک تصویر است که ناحیه هایی برای کلیک کردن دارد. این ناحیه ها، با استفاده از یک یا چند تگ <area> تعریف می شوند. بعنوان مثال، سعی کنید در تصویر زیر، بر روی تلفن یا فنجان قهوه یا لپ تاپ کلیک کنید:

 <img src="/other/workplace.jpg" alt="Workplace" usemap="#workmap">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="/other/computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="/other/phone.htm">
  <area shape="circle" coords="337,300,44" alt="Coffee" href="/other/coffee.htm">
</map> 

این روش چگونه کار می کند؟

بسته به اینکه در کجای تصویر کلیک کنیم، می توانیم کارهای متفاوتی انجام دهیم. برای ایجاد یک نقشه تصویری، به یک تصویر نیاز داریم و همچنین، به کمی کد HTML نیاز داریم تا ناحیه های قابل کلیک را مشخص کنیم.

گام اول، مشخص کردن تصویر

این تصویر با استفاده از تگ <img> اضافه می شود. تنها تفاوت آن با دیگر تصاویر این است که باید یک خصوصیت به نام usemap را به آن اضافه کنیم.

<img src="/other/workplace.jpg" alt="Workplace" usemap="#workmap">

مقدار خصوصیت usemap با یک علامت # آغاز می شود و پس از آن؛ نام نقشه تصویر مشخص می شود و از آن برای ایجاد یک ارتباط بین تصویر و نقشه تصویر استفاده می شود.

نکته: شما می توانید از هر تصویری بعنوان نقشه تصویر استفاده کنید.

 گام دوم، ایجاد نقشه تصویر

برای انجام این کار، یک عنصر <map> را اضافه کنید. از عنصر <map> براری ایجاد یک نقشه تصویر استفاده می شود و با استفاده از خصوصیت name به تصویر مورد نظر پیوند می خورد.

<map name="workmap">

مقدار خصوصیت name باید با مقدار خصوصیت usemap در تگ <img> مشابه باشد.

گام سوم، انتخاب ناحیه ها

اکنون ناحیه های قابل کلیک را انتخاب کنید. یک ناحیه ی قابل کلیک با استفاده از عنصر <area> تعریف می شود.

تعیین شکل ناحیه

ما باید شکل ناحیه قابل انتخاب را مشخص کنیم. برای این کار، می توانیم از یکی از مقادیر زیر استفاده کنیم:

• rect : یک ناحیه ی مستطیلی را تعریف می کند.
• circle : یک ناحیه دایره ای را مشخص می کند.
• poly : یک ناحیه چندضلعی را مشخص می کند.
• default : ناحیه کامل را مشخص می کند.

ما همچنین باید تعدادی مختصات را تعریف کنیم تا بتوانیم ناحیه قابل کلیک را در تصویر مشخص کنیم.

حالت rect

مختصات برای حالت shape="rect" به صورت دو جفت مقدار هستند، یک مقدار نشان دهنده محور x و یک مقدار نشان دهنده محور y است. بنابراین مختصات 34,44 به اندازه 34 پیکسل از سمت چپ و 44 پیکسل از بالا فاصله دارد.

 مختصات 270,350 نیز 270 پیکسل از سمت چپ و 350 پیکسل از سمت بالا فاصله دارد:

 اکنون ما برای ایجاد یک ناحیه مستطیلی قابل کلیک، داده های کافی را در اختیار داریم:

<area shape="rect" coords="34, 44, 270, 350" href="/other/test1.html"> 

 این ناحیه ی قابل کلیک، به صورت زیر است و کاربر را به صفحه test1.html انتقال می دهد:

حالت circle

برای اضافه کردن یک ناحیه ی دایره ای، ابتدا مختصات مرکز دایره را پیدا کنید. که در تصویر زیر مختصات مرکز دایره فنجان 337,300 است.

سپس شعاع دایره ی مورد نظر را مشخص کنید: شعاعی برابر با 44 پیکسل را انتخاب می کنیم.

اکنون داده های کافی برای ایجاد یک ناحیه گرافیکی قابل کلیک را دریافت کرده ایم:

<area shape="circle" coords="337, 300, 44" href="/other/test1.html">

این ناحیه، قابل کلیک خواهد بود و کاربر را به صفحه coffee.htm منتقل می کند:

نقشه تصویر و جاوا اسکریپت

حتماً مجبور نیستیم که از یک ناحیه ی قابل کلیک به یک صفحه دیگر منتقل شویم، بلکه می توانیم یک تابع جاوا اسکریپت را فراخوانی کنیم. برای اجرای یک تابع جاوا اسکریپت، یک رویداد کلیک(click) را در عنصر <area> اضافه کنید:

<area shape="circle" coords="337,300,44" onclick="myFunction()">

خلاصه مقاله

• برای تعریف یک نقشه تصویر(image-map)، از عنصر اچ تی ام ال <map> استفاده کنید.
• از عنصر اچ تی ام ال <area> برای تعریف ناحیه های قابل کلیک در نقشه تصویر استفاده کنید.
• برای اشاره به یک نقشه تصویر، از خصوصیت usemap که به <img> تعلق دارد استفاده کنید.