تگ area در html

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

توجه: ویژگی usemap در img با ویژگی name در تگ map مرتبط است و رابطه ای بین تصویر و نقشه ایجاد می کند.

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">
<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map> 

تگ area می‌تواند دارای چندین ویژگی یا attribute باشد که برخی از این ویژگی‌های ضروری و برخی دیگر اختیاری هستند.

ویژگی coords مختصات یک ناحیه را در نقشه تصویر مشخص می کند.

ویژگی coords همراه با ویژگی shape برای تعیین اندازه، شکل و مکان یک ناحیه استفاده می شود.

مقادیر:

• x1,y1,x2,y2: مختصات گوشه بالا سمت چپ و پایین سمت راست مستطیل را مشخص می کند (shape="rect")
• x,y,radius: مختصات مرکز دایره و شعاع (shape="circle") را مشخص می کند.
• x1,y1,x2,y2,..,xn,yn: مختصات لبه های چند ضلعی را مشخص می کند. اگر اولین و آخرین جفت مختصات یکسان نباشند، مرورگر آخرین جفت مختصات را برای بستن چند ضلعی اضافه می کند. (shape="poly")

نکته: مختصات گوشه سمت چپ بالای یک ناحیه 0،0 است.

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun"
  href="/images/sun.gif" type="image/gif">
</map> 

ویژگی shape شکل یک area را مشخص می کند و همراه با ویژگی coords برای تعیین اندازه، شکل و مکان یک ناحیه استفاده می شود. این ویژگی شامل چند مقدار به شرح زیر است:

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

<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map> 

ویژگی alt در تگ area یک متن جایگزین در صورت نیاز نمایش می‌دهد. در صورتی که از این ویژگی در تگ area استفاده کنید استفاده از ویژگی href الزامی است.

ویژگی href پیوند area به صفحه مورد نظر را مشخص می‌کند، اگر این ویژگی استفاده نشود area یک لینک نیست.

ویژگی hreflang زبان صفحه یا فایل پیوند شده را مشخص می کند. این ویژگی فقط در صورتی استفاده می شود که ویژگی href تنظیم شده باشد. مقادیر قابل استفاده در این ویژگی کد دو حرفی زبان است برای مثال fa، en.

<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" hreflang="en">
</map>  

ویژگی download در تگ area مشخص می کند که هدف (آدرس قرار داده شده در ویژگی href) دانلود است و زمانی که کاربر روی لینک کلیک می کند فایل موجود دانلود می شود. این ویژگی میتواند دارای مقدار و یا بدون مقدار باشید، مقدار وارد شده نام فایل دانلود شده است و در صورتی که مقداری وارد نشود مرورگر از روی آدرس نام فایل را تشخیص می‌دهد.

<map name="planetmap">
<area shape="circle" coords="90,58,3" alt="Mercury" href="merglobe.gif" download="mercury">
</map> 

ویژگی media مشخص می کند که سند پیوند داده شده برای چه دستگاهی (مثال آیفون) مناسب یا بهینه شده است. ویژگی media فقط در صورتی کاربرد دارد که تگ <area> دارای ویژگی href باشد.

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun"
  href="sun.htm" media="screen and (min-color-index:256)">
</map> 

ویژگی ReferrerPolicy در تگ area مشخص می کند که وقتی کاربر روی لینک کلیک می کند، چه اطلاعاتی از سمت ارجاع دهنده (شما) ارسال شود، این رویکردها به دلیل حفظ حریم خصوصی کاربران برای درخواست‌های cross-origin استفاده می‌شود. این ویژگی دارای چندین مقدار است که در لیست زیر هریک از مقادیر توضیح داده شده است.

• no-referrer: هیچ اطلاعات ارجاعی ارسال نمی شود.
• no-referrer-when-downgrade: پیش فرض اگر سطح امنیتی پروتکل یکسان و یا بالاتر باشد، مبدا، مسیر، و یا رشته پرس و جو را ارسال می کند، http-to-http, https-to-https و http-to-https ارسال می‌شود اما https-to-http ارسال نخواهد شد چرا که سطح امنیتی پروتکل پایین تر است.
• origin: مبدا (scheme، host و port) سند را ارسال می کند.
• origin-when-cross-origin: این مقدار origin، path و query string را برای درخواست همان مبدا ارسال می کند. اطلاعات کامل referrer (شما، ارجاع دهنده) برای درخواست‌هایی که از دامنه‌های مشابه صورت می‌گیرند ارسال می‌شود، در غیر این صورت اطلاعات referrer تنها شامل دامنه مبدا است.
• same-origin: در این حالت، اگر یک درخواست از یک منبع با دامنه مشابه (same-origin) صورت گیرد، اطلاعات کامل referrer به صورت پیشفرض به درخواست مورد نظر اضافه خواهد شد. در غیر این صورت درخواست بدون هیچگونه اطلاعات اضافی ارسال می‌شود.
• strict-origin-when-cross-origin: این مقدار مشابه no-referrer-when-downgrade بوده با این تفاوت که no-referrer-when-downgrade برای سایت‌هایی که هم از HTTP و HTTPS استفاده می‌کنند مناسب است اما این مقدار برای سایت‌هایی که از دامنه‌های مختلف استفاده می‌کنند، مناسب است.
• unsafe-url: این مقدار تمامی اطلاعات (origin، path و query string) را بدون در نظر گرفتن امنیت و سطح پروتکل ارسال می‌کند. از این مقدار با دقت استفاده کنید!

<map name="planetmap">
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury" referrerpolicy="same-origin">
</map> 

ویژگی rel در تگ area رابطه بین نقشه و URL یا همان مقدار href را مشخص می کند. این ویژگی فقط در صورتی استفاده می شود که ویژگی href تنظیم شده باشد. موتورهای جستجو می توانند از این ویژگی برای دریافت اطلاعات بیشتر در مورد یک لینک استفاده کنند.

• nofollow: پیوند به یک سند تأیید نشده (مثال تبلیغات). همچنین nofollow توسط Google استفاده می‌شود تا مشخص کند که ربات‌های جستجوی Google نباید آن پیوند را دنبال کنند.
• noopener: پیوند به یک صفحه‌ی جدید با یک context جدید و مستقل، بدون اینکه ارتباطی با صفحه‌ی فعلی داشته باشد.
• noreferrer: جلوگیری از ارسال اطلاعات از صفحه ارجاع دهنده. در این حالت وقتی کاربر روی لینک کلیک می‌کند مشخصات ارجاع دهنده در URL مقصد در دسترس نخواهد بود.
• external: نشان می دهد که URL ارجاع شده بخشی از همان سایت نیست (پیوند به سایت دیگر است).
• alternate: پیوند به یک صفحه جایگزین از صفحه فعلی (مثال صفحه چاپ، صفحه ترجمه ترجمه).
• author: پیوند را به نویسنده صفحه.
• bookmark: پیوند یا URL دائمی (مورد استفاده برای bookmark)
• help: پیوند به یک سند راهنما در خصوص صفحه.
• license: پیوند به اطلاعات مجوز برای صفحه.
• next: پیوند به صفحه بعدی موضوع.
• prev: پیوند به صفحه قبلی موضوع.
• search: پیوند به ابزار جستجو برای سند.
• tag: پیوند به برچسب (کلمه کلیدی) برای صفحه فعلی.

<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" rel="alternate">
</map>  

ویژگی target مشخص می کند که URL مقصد یا صفحه پیوند شده کجا باز شود.

• _self: باز شدن در همان frame که روی آن کلیک شده است (پیش فرض).
• _parent: باز شدن در frame والد.
• _top: باز شدن در بالاترین و اولین frame والد.
• _blank: باز شدن در یک پنجره جدید.
• framename: باز شدن در iframe نامگذاری شده.

<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" target="_blank">
</map> 

ویژگی type در تگ area برای تعیین نوع یا فرمت محتوایی که در لینک وجود دارد، استفاده می‌شود، برای مثال فایل‌های PDF، تصاویر، ویدئوها و غیره. اگرچه استفاده از این ویژگی برای تگ a به صورت اختیاری است، اما این اطلاعات به مرورگرها کمک می‌کنند تا بتوانند با استفاده از نرم‌افزار مناسب هر فایل، آن فایل را باز کنند. برای فهرست کامل انواع رسانه های استاندارد به صفحه IANA Media Types مراجعه کنید.

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun"
  href="/images/sun.gif" type="image/gif">
</map> 

تگ <area> از Global Attributes در HTML پشتیبانی می کند.

تگ <area> از Event Attributes in HTML در HTML پشتیبانی می کند.

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

area {
  display: none;
}