تگ area و کاربرد آن در HTML

تگ area و کاربرد آن در HTML

تگ <area> منطقه ای در داخل یک نقشه تصویری (یک تصویر با مناطق قابل کلیک) تعریف می کند. به مثال زیر دقت کنید:

<img src="planets.gif" width="145" height="126" alt="Planets"
usemap="#planetmap">
<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>

 

تگ area و کاربرد آن در HTML

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

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

تفاوت بین HTML 4.01 و HTML5

HTML5 چند خاصیت جدید معرفی کرده و برخی از خاصیت های HTML 4.01 را دیگر پشتیبانی نمی کند.

تفاوت بین HTML و XHTML

در HTML تگ <area>، تگ پایان ندارد در حالیکه در XHTML باید بسته شود.

خاصیت ها

تگ HTML می تواند شامل یک یا چند خاصیت باشد که چگونگی ارائه در مرورگر را تعیین میکنند. خاصیت ها دارای یک نام و یک مقدار هستند که با علامت (=) از هم جدا شده اند. مقدار خاصیت با علامت نقل قول احاطه میشود .

۳ نوع خاصیت وجود دارد که شما می توانید به تگ های HTML خود اضافه کنید:

• خاصیت ویژه عنصر
• خاصیت عمومی
• خاصیت رویداد

خاصیت ویژه عنصر 

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

خاصیت عمومی

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

accesskey	hidden	itemtype
class	id	lang
contenteditable	inert	spellcheck
contextmenu	itemid	style
dir	itemprop	tabindex
draggable	itemref	title
dropzone	itemscope	translate

خاصیت رویداد

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

onabort	onended	onmousewheel
oncancel	onerror	onpause
onblur	onfocus	onplay
oncanplay	onformchange	onplaying
oncanplaythrough	onforminput	onprogress
onchange	oninput	onratechange
onclick	oninvalid	onreadystatechange
oncontextmenu	onkeydown	onscroll
ondblclick	onkeypress	onseeked
ondrag	onkeyup	onseeking
ondragend	onload	onselect
ondragenter	onloadeddata	onshow
ondragexit	onloadedmetadata	onstalled
ondragleave	onloadstart	onsubmit
ondragover	onmousedown	onsuspend
ondragstart	onmousemove	ontimeupdate
ondrop	onmouseout	onvolumechange
ondurationchange	onmouseover	onwaiting
onemptied	onmouseup

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

تگ <area> در همه مرورگرهای اصلی نظیر اینترنت اکسپلورر، فایرفاکس ، اپرا ، گوگل کروم و سافاری پشتیبانی می شود