آموزش HTML – تگ map

نویسنده : مرتضی گنج | تاریخ انتشار : 2020/01/13 | بخش : آموزش HTML

تعریف و کاربرد تگ map در HTML

تگ map یا ( مَپ ) تگی است که با استفاده از آن می توان یک نقشه ی تصویری یا Image-Map را در یک صفحه وب ایجاد کرد.

شاید براتون سواله که اصلا نقشه تصویری یا Image-Map چیه؟! نقشه تصویری بطور کلی به یک عکس یا تصویر که دارای چندین نقطه قابل کلیک (یعنی کاربر بتونه رو اون نقاط کلیک کنه) باشد، نقشه تصویری گفته می شود.

برای ایجاد یک نقشه تصویری ما باید از تگ <img> برای ایجاد تصویر یا عکس مورد نظرمون استفاده نماییم و از تگ <map> و تگ <area> برای ایجاد نقاط قابل کلیک بروی تصویر مورد نظرمون استفاده نماییم.

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

 

نکات و توضیحات

نامی که در صفت usemap در تگ <img> ایجاد می شود باید با نامی که در صفت name در تگ <img> ایجاد می شود یکسان باشد.

در XHTML استفاده از صفت name نامعتبر می باشد لذا باید از صفت ID بجای صفت name استفاده نمود.

 

مثال از تگ map در HTML

<img src="https://www.sitekade.com/wp-content/uploads/2020/01/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="https://www.sitekade.com/wp-content/uploads/2020/01/sun.html" alt="Sun">
  <area shape="circle" coords="90,58,3" href="https://www.sitekade.com/wp-content/uploads/2020/01/merglobe.html" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="https://www.sitekade.com/wp-content/uploads/2020/01/venglobe.html" alt="Venus">
</map>

تمرین کنید !

 

پشتیبانی مرورگرها از تگ map در HTML

Element
<legend> بله بله بله بله بله

 

جدول صفات تگ map در HTML

نام صفت  مقدار توضیح
name mapname یک نام برای نقشه تصویری مشخص می کند. (ضروری)