برچسب <map> HTML
تعریف و استفاده
<map> برچسب برای تعریف نقشه تصویری دارد. نقشه تصویری (image map)، یک نوع نقشه هدایت‌کننده است که تصاویری با مناطق قابل کلیک دارند.
<map> عناصر نیاز به ویژگی nameاین ویژگی با <img> عناصر ، ویژگی usemap مربوط به یکدیگر، ارتباطی بین تصویر و نقشه ایجاد می‌کنند.
<map> شامل برخی از <area> عناصر، برای تعریف منطقه قابل کلیک در نقشه تصویری مراجعه کنید.
لطفاً به:
دستورالعمل HTML DOM:مجموعه نقشه‌ها
مثال
مثال 1
نقشه تصویری با منطقه قابل کلیک:
<img src="life.png" alt="Life" usemap="#lifemap" width="650" height="451"> <map name="lifemap"> <area shape="rect" coords="10,208,155,338" alt="AirPods" href="airpods.html"> <area shape="rect" coords="214,65,364,365" alt="iPhone" href="iphone.html"> <area shape="circle" coords="570,291,75" alt="Coffee" href="coffee.html"> </map>
مثال 2
یک نقشه تصویری با منطقه قابل کلیک دیگر:
<img src="solarsystem.png" width="1024" height="576" alt="Planets" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="0,0,114,576" alt="Sun" href="sun.html"> <area shape="circle" coords="190,230,5" alt="Mercury" href="mercury.html"> <area shape="circle" coords="228,230,5" alt="Venus" href="venus.html"> </map>
ویژگی
| ویژگی | مقدار | توضیح |
|---|---|---|
| name | نام نقشه | ضروری. نام نقشه تصویر را مشخص می‌کند. |
ویژگی‌های جهانی
<map> این برچسب‌ها همچنین از ویژگی‌های رویداد پشتیبانی می‌کنند ویژگی‌های جهانی در HTML.
ویژگی‌های رویداد
<map> این برچسب‌ها همچنین از ویژگی‌های رویداد پشتیبانی می‌کنند ویژگی‌های رویداد در HTML.
تنظیمات پیش‌فرض CSS
بیشتر مرورگرها با تنظیمات پیش‌فرض زیر نمایش داده می‌شوند <map> عنصر:
map {
display: inline;
}
پشتیبانی مرورگر
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| پشتیبانی | پشتیبانی | پشتیبانی | پشتیبانی | پشتیبانی |
