تگ area در HTML

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

مثال

در این مثال یک تصویر ایجاد کرده ایم که بخش هایی از آن قابل کلیک می باشد :

<img src="https://www.bubbleslearn.ir/wp-content/uploads/2021/05/workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="https://fa.wikipedia.org/wiki/%D8%B1%D8%A7%DB%8C%D8%A7%D9%86%D9%87">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="https://fa.wikipedia.org/wiki/%D8%AA%D9%84%D9%81%D9%86">
<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="https://fa.wikipedia.org/wiki/%D9%82%D9%87%D9%88%D9%87">
</map>

تست آنلاین کد

تعریف و کاربرد

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

تگ <area> درون تگ <map> بکار برده می شود.

توضیحات بیشتر

نقشه تصویری چیست ؟ فرض کنید شما یک تصویر دارید که عکس یک فنجان قهوه هست ، شما با استفاده از تگ <map> میتوانید کاری بکنید که اگر کاربر روی اون فنجان قهوه داخل تصویر کلیک کرد مثلاً وارد یک وب سایت بشه ، دقیقاً همین کار رو تو مثال اول انجام دادیم !

خاصیت usemap

برای اتصال یا ایجاد ارتباط بین تصویر و نقشه تعریف شده باید مقدار خاصیت usemap در عنصر <img> برابر با مقدار خاصیت name در تگ <map> باشد.

عنصر area

تگ <map> از چندین تگ <area> تشکیل شده که عنصر <area> نقاط قابل کلیک روی نقشه تصویر را مشخص می کنند.

آموزش تگ <map> را نیز مشاهده کنید.

پشتیبانی مرورگر ها

خواص

خواص عمومی

تگ area از خواص عمومی در HTML پشتیبانی میکند.

رویداد های عمومی

تگ area از رویداد های عمومی در HTML پشتیبانی میکند.

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

اکثر مرورگر ها عنصر area در HTML را با تنظیمات پیش فرض زیر نمایش می دهند:

area {
  display: none;
}