معرفی و کاربرد تگ map در HTML
معرفی و کاربرد تگ map در HTML تصویر نقشه در سند
در این مقاله از سایت آموزی جهت استفاده شما کاربران گرامی به معرفی و کاربرد تگ <map> در HTML می پردازیم.
تگ <map> در HTML
تگ <map> برای تعریف یک image-map ( تصویر-نقشه ) سمت سرویس گیرنده استفاده می شود.
یک image-map تصویری است که نواحی مختلف آن قابل کلیک کردن است.
خصوصیت الزامی name در تگ <map> با خصوصیت usemap در تگ <img> مرتبط است. این خصوصیت یک ارتباط بین تصویر و نقشه ایجاد می کند.
تگ <map> شامل تعدادی تگ <area> است که نواحی قابل کلیک در تصویر نقشه را ایجاد می کنند.
تگ area منطقه ای را در داخل یک image-map مشخص می کند. ( image-map همانطور که اشاره شد، به تصویری گفته می شود که بعضی قسمت های آن قابلیت کلیک کردن دارد )
تگ <area> همیشه داخل یک تگ <map> قرار می گیرد.
مثال در مورد تگ <map> در html
[html]<img src=”siteamoozi.gif” width=”145″ height=”126″ alt=”siteamoozi” usemap=”#siteamoozimap”>
<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>[/html]
بررسی تگ map در سند HTML و XHTML
خصوصیت name اگرچه همچنان در سند HTML پشتیبانی می شود ، اما در XHTML ، خصوصیت name قدیمی شده و حذف خواهد شد. و بهتر است به جای آن از خصوصیت id استفاده شود.
بررسی تگ <map> در HTML 4.01 و HTML5
در HTML5 ، اگر خصوصیت id برای تگ <map> مشخص کردید، باید مقدار آن با مقدار خصوصیت name برابر باشد.
خصوصیات ویژه تگ map در HTML5
خصوصیت | مقدار | توضیحات |
---|---|---|
name | mapname | الزامی است. یک نام برای image-map مشخص می کند. |
ویژگی های عمومی تگ <map> در HTML
تگ <map> از کلیه ویژگی های عمومی در سند HTML پشتیبانی می کند.
رویدادهای عمومی تگ <map> در HTML
تگ <map> از کلیه رویدادهای عمومی در سند HTML پشتیبانی می کند.
پشتیبانی مرورگرها از تگ map در HTML
تگ <map> در همه مرورگرهای معتبر اینترنتی نظیر اینترنت اکسپلورر ، فایرفاکس ، اپرا ، گوگل کروم و سافاری پشتیبانی می شود.
برای متخصص شدن در طراحی سایت فروشگاهی با وردپرس روی لینک زیر کلیک کن و تو دوره ثبت نام کن:
دوره فوق حرفه ای طراحی سایت فروشگاهی با وردپرس پروژه محور
برای متخصص شدن در طراحی بخش Front End سایت روی لینک زیر کلیک کن و تو دوره ثبت نام کن:
دوره فوق حرفه ای طراحی سایت با HTML5 و CSS3 پروژه محور
پیوندهای مهم و کاربردی
تگ های جدید HTML5 در سایت آموزی
صفات تگ های HTML در سایت آموزی
تگ های منسوخ شده HTML5 در سایت آموزی
تگ های block level و inline level در سایت آموزی
معرفی و کاربرد تگ map در HTML تصویر نقشه در سند – اختصاصی سایت آموزی
درباره سایت آموزی
علیرضا ابراهیمی - بنیانگذار وبسایت آموزشی سایت آموزی ، 8 سال سابقه فعالیت حرفه ای در زمینه طراحی سایت ، سئو ، سابقه تدریس اغلب زبان های برنامه نویسی تحت وب ، محقق و تحلیلگر ساختارهای توسعه دهنده وب
نوشته های بیشتر از سایت آموزی2 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
به نظرم کد های مثالتون اشتباهه
سلام و درود بر شما… این فقط یک نمونه برای چگونگی استفاده از تگ map در اسناد HTML هست، و فایل های آن صوری هستند. و قطعا اگر سورس فایل های واقعی در همین کد قرار بدید ، کد مربوطه مشکلی ندارد…