تگ area در HTML

  /  فرانت اند   /  HTML   /  تگ 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>بلهبلهبلهبلهبله

خواص

خاصیتمقدارتوضیحات
alttextیک متن جایگزین برای تصاویر مشخص می کند ( زمانی که تصاویر قابل نمایش نیستند این متن به نمایش در می آید ، همچنین برای سئو خوب است )
coordscoordinatesمختصات محدوده قابل کلیک را مشخص می کند
downloadfilenameمشخص می کند که با کلیک کاربر بر روی پیوند لینک ، URL یا فایل مشخص شده بارگیری می شود
hrefURLآدرس URL مقصد را برای منطقه قابل کلیک مشخص می کند
hreflanglanguage_codeزبان URL مورد نظر را مشخص می کند
mediamedia queryمشخص می کند که URL هدف برای چه رسانه / دستگاهی بهینه شده است
referrerpolicyno-referrer
no-referrer-when-downgrade
origin
origin-when-cross-origin
same-origin
strict-origin-when-cross-origin
unsafe-url
مشخص می کند کدام اطلاعات referrer با پیوند ارسال شود
relalternate
author
bookmark
help
license
next
nofollow
noreferrer
prefetch
prev
search
tag
رابطه بین سند فعلی و URL مورد نظر را مشخص می کند
shapedefault
rect
circle
poly
نوع شکل ناحیه قابل کلیک را مشخص میکند (مثلاً مستطیلی ، دایره ای و یا چند ضلعی)
target_blank
_parent
_self
_top
framename
مشخص میکند که پیوند یا صفحه مقصد URL چگونه نمایش داده شود ( مثلاً در یک تب جدید باز شود یا… )
typemedia_typeنوع رسانه URL موردنظر را مشخص می کند

خواص عمومی

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

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

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

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

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

area {
  display: none;
}
5/5 - (1 امتیاز)

برای دسترسی به آموزش های بیشتر و ویدیو های من ، کلمه کلیدی متین برونسی را داخل گوگل سرچ کنید.

ارسال یک نظر