معرفی و کاربرد تگ 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 پروژه محور

پیوندهای مهم و کاربردی

تگ های HTML در سایت آموزی

تگ های جدید HTML5 در سایت آموزی

صفات تگ های HTML در سایت آموزی

تگ های منسوخ شده HTML5 در سایت آموزی

تگ های block level و inline level در سایت آموزی

تگ های HTML در W3school

ویژگی های CSS در سایت آموزی

ویژگی های CSS در W3schools

معرفی و کاربرد تگ map در HTML تصویر نقشه در سند – اختصاصی سایت آموزی