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