HTML — نقشه تصویر (map)

آخرین بروزرسانی: 1404/08/07

قبلی: بخش اصلی (main) بعدی: نشانه گذاری (mark)

نقشه تصویر (map)

«نقشه تصویر (Image Map)» یعنی یک عکس با نواحی قابل کلیک. با تگ <map> این نواحی را تعریف می کنیم و با usemap عکس را به آن وصل می کنیم. این روش، مثل نقشه مدرسه است که هر بخشش یک مقصد دارد.

تعریف و کاربرد نقشه تصویر

طبق منبع، تگ <map> یک نقشه تصویر می سازد. این تگ داخل خود چند تگ area دارد که هرکدام یک ناحیه قابل کلیک را مشخص می کنند. ویژگی name در <map> با ویژگی usemap در img جفت می شود.

مثال ساده: وصل کردن img به map

&lt;img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379"&gt;
&lt;map name="workmap"&gt;
  &lt;area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm"&gt;
  &lt;area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm"&gt;
  &lt;area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm"&gt;
&lt;/map&gt;

مشاهده در ادیتور

ویژگی ضروری name در <map>

طبق جدول صفات منبع، name الزامی است و نام نقشه تصویر را تعیین می کند. سپس در تگ <img> همین نام را با # داخل ویژگی usemap می نویسیم تا ارتباط برقرار شود.

مثال دیگر: نواحی بیشتر

&lt;img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"&gt;
&lt;map name="planetmap"&gt;
  &lt;area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun"&gt;
  &lt;area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury"&gt;
  &lt;area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus"&gt;
&lt;/map&gt;

مشاهده در ادیتور

پشتیبانی مرورگر

طبق جدول منبع، <map> در همه مرورگرهای اصلی پشتیبانی می شود.

گام های تمرینی سریع

برای <img> ویژگی usemap بگذار.
یک <map name="myMap"> بساز.
چند <area> با shape و coords اضافه کن.

نکته: برای مرور مفاهیم صفحه، بخش المان های معنایی و راهنمای بخش اصلی را هم ببین. صفحه نقشه تصویر مرجع سریع توست.

جمع بندی سریع

<map> نقشه کلیک برای عکس می سازد.
name در <map> الزامی است.
usemap در <img> باید به name وصل شود.
ناحیه ها با <area> تعریف می شوند.