برای استفاده از همه امکانات سایت باید جاوا اسکریپت مرورگر خود را فعال کنید.

آموزش تگ area در HTML - راهنمای کار با ناحیه های قابل کلیک نقشه تصویری در html

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

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

تگ <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> در مرورگرهای کروم، فایرفاکس، اپرا، سافاری، اینترنت اکسپلورر و اج پشتیبانی می شود.

مرورگر کروم فایرفاکس اپرا سافاری اینترنت اکسپلورر / اج
پشتیبانی بله بله بله بله بله

 

ویژگی ها

ویژگی مقدار توضیحات
alt text متن جایگزین برای محدوده تصویر مشخص می کند و همراه با ویژگی href به کار می رود.
coords coordinates مختصات ناحیه یا محدوده قابل کلیک را مشخص می کند.
download filename برای دانلود مستقیم فایل پس از کلیک بر روی محدوده قابل کلیک به کار می رود. filename نام فایل دانلود شده می باشد.
href URL آدرس صفحه مقصد (لینک شده) محدوده قابل کلیک را مشخص می کند.
hreflang language_code زبان صفحه ی مقصد (لینک شده) را مشخص می کند.
media media_query مشخص می کند که لینک برای چه نوع رسانه / دستگاهی بهینه شده است.
nohref value مشخص می کند که محدوده قابل لینک هیچ لینک مقصدی ندارد.
rel alternate
author
bookmark
help
license
next
nofollow
noreferrer
prefetch
prev
search
tag
رابطه بین صفحه فعلی با صفحه ای که به آن لینک کرده ایم را مشخص می کند.
shape default
rect
circle
poly
نوع شکل ناحیه قابل کلیک را مشخص می کند.
target _blank
_parent
_self
_top
framename
نحوه باز شدن لینک مقصد را مشخص می کند.
type media_type نوع رسانه لینک شده را مشخص می کند.


پشتیبانی از ویژگی ها و رویدادهای عمومی

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


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

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

area {
  display: none;
}

 

موضوع: آموزش HTML
کلمات کلیدی: ، ، ، ، ، ، ، ، ، ، ،

نظرات نظرات تا اطلاع ثانوی غیر فعال است.