صفحه اول >> دانستنی ها >>
آموزش تگ 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>
<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;
}
display: none;
}
موضوع: آموزش HTML
نظرات نظرات تا اطلاع ثانوی غیر فعال است.