تگ map در HTML

به نام خداوند علم و دانش. سلام به دوستان گرامی و مخاطبین وب سایت آموزشی کدیونی، وقت همگی بخیر، در این صفحه با مطلب تگ map در HTML از سری آموزش های HTML در خدمت شما عزیزان هستیم.

در مطلب تگ img نحوه نمایش عکس و در مطلب تگ a نحوه افزودن لینک در HTML را یاد گرفتید. حال اگر بخواهید عکس را به چند ناحیه قابل کلیک تبدیل کنید این کار به چه صورت قابل انجام است؟ مثلا عکس ما نقشه جهان است و می خواهیم با کلیک بر روی هر کشور وارد لینک صفحه آن کشور شویم. برای این کار از ترکیب تگ map و area در HTML استفاده می کنیم.

تگ map چیست؟

تگ map برای ایجاد نقشه تصویری به کار می رود.

این تگ با <map> شروع شده و با </map> پایان می یابد.

<map></map>

برای ایجاد ناحیه های قابل کلیک باید از تگ area کمک گرفت.

صفت name

این صفت جهت ارتباط عکس و نقشه به کار می رود. (اجباری)

مقدار این صفت باید با مقدار صفت usemap در تگ img برابر باشد.

مثال:

<img src="image.jpg" alt="image" usemap="#example" width="300" height="300">

<map name="example">
  <area shape="rect" coords="10,50,150,250" href="link.html">
</map>

تنظیمات پیش فرض CSS

تنظیمات پیش فرض CSS تگ map در اکثر مرورگرها به صورت زیر است:

map {
  display: inline;
}

سازگاری با مرورگرها

تگ map با مرورگرهای زیر سازگار است:

• گوگل کروم
• فایرفاکس
• اج
• اپرا
• سافاری
• گوگل کروم اندروید
• فایرفاکس اندروید
• اپرا اندروید
• سافاری iOS