برچسب <area> HTML

تعریف و استفاده

<area> برچسب تعریف ناحیه‌های نقشه تصویری (نقشه تصویری تصویری است که دارای ناحیه‌ای قابل کلیک است، یعنی نقشه پاسخگویی سمت مشتری).

<area> عنصر همیشه درون برچسب <map>داخل.

توجه:عنصر <img> در ویژگی usemap با عنصر <map> از ویژگی nameمرتبط، ایجاد ارتباط بین تصویر و نقشه.

لطفاً به:

دستورالعمل HTML DOM:مجموعه Area

مثال

مثال 1

تصویری با ناحیه‌ای قابل کلیک:

<img src="life.png" alt="Life" usemap="#lifemap" width="650" height="451">
<map name="lifemap">
  <area shape="rect" coords="10,208,155,338" alt="AirPods" href="airpods.html">
  <area shape="rect" coords="214,65,364,365" alt="iPhone" href="iphone.html">
  <area shape="circle" coords="570,291,75" alt="Coffee" href="coffee.html">
</map>

به طور مستقیم امتحان کنید

مثال 2

تصویری دیگری با ناحیه‌ای قابل کلیک:

<img src="solarsystem.png" width="1024" height="576" alt="Planets" usemap="#planetmap">
<map name="planetmap">
  <area shape="rect" coords="0,0,114,576" alt="Sun" href="sun.html">
  <area shape="circle" coords="190,230,5" alt="Mercury" href="mercury.html">
  <area shape="circle" coords="228,230,5" alt="Venus" href="venus.html">
</map>

به طور مستقیم امتحان کنید

خصوصیت

خصوصیت مقدار وصف
alt متن متن جایگزین منطقه را مشخص می‌کند. اگر خصوصیت href وجود داشته باشد، الزامی است.
coords مختصات مختصات منطقه را مشخص می‌کند.
download نام فایل هدف دانلود را در هنگام کلیک کاربر مشخص می‌کند.
href URL هدف پیوند‌های منطقه را مشخص می‌کند.
hreflang کد زبان زبان URL هدف را مشخص می‌کند.
media جستجوی رسانه رسانه/دستگاه بهینه‌سازی شده URL هدف را مشخص می‌کند.
referrerpolicy
  • no-referrer
  • no-referrer-when-downgrade
  • origin
  • origin-when-cross-origin
  • same-origin
  • strict-origin-when-cross-origin
  • unsafe-url
 اطلاعات مرتبطی که باید با لینک ارسال شود را مشخص می‌کند.
rel
  • alternate
  • author
  • bookmark
  • help
  • license
  • next
  • nofollow
  • noreferrer
  • prefetch
  • prev
  • search
  • tag
 رابطه بین مستند فعلی و URL هدف را مشخص می‌کند.
shape
  • default
  • rect
  • circle
  • poly
 شکل منطقه را مشخص می‌کند.
target
  • _blank
  • _parent
  • _self
  • _top
  • نام فریم
 مکان باز کردن URL هدف را مشخص می‌کند.
type نوع رسانه نوع رسانه‌ای هدف URL را مشخص می‌کند.

خصوصیات جهانی

<area> برچسب‌ها از خصوصیات رویداد پشتیبانی می‌کنند خصوصیات جهانی در HTML。

خصوصیات رویداد

<area> برچسب‌ها از خصوصیات رویداد پشتیبانی می‌کنند خصوصیات رویداد در HTML。

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

بیشتر مرورگرها از مقادیر پیش‌فرض زیر برای نمایش استفاده می‌کنند <area> عنصر:

area {
  display: none;
}

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
پشتیبانی پشتیبانی پشتیبانی پشتیبانی پشتیبانی