ویژگی usemap در HTML برای نقشه‌گذاری تصاویر یا همان Image Map استفاده می‌شود که به شما امکان می‌دهد نقاط مختلف یک تصویر را به لینک‌های متفاوتی متصل کنید. این ویژگی زمانی مفید است که بخواهید با یک تصویر بزرگ، چندین لینک ارائه دهید. مثلاً در عکس‌هایی که برای نمایندگی نقشه‌ها استفاده می‌شوند، می‌توانید از این ویژگی بهره ببرید تا به مناطق مختلف جهان لینک‌های جداگانه بدهید.
برای شروع، ابتدا باید یک تصویر و یک نقشه تعریف کنید. تصویر شامل خاصیت usemap و نقشه شامل مناطقی است که شما تعریف می‌کنید. هر منطقه را می‌توانید با ویژگی‌هایی مانند shape و coords شخصی‌سازی کنید.
وقتی از ویژگی usemap استفاده می‌کنید، باید مطمئن شوید که در تگ <img> مقدار درستی برای خاصیت usemap تعریف کرده‌اید که به یک <map> با id یکتا اشاره کند.
استفاده صحیح از usemap نه تنها به بهبود تجربه کاربری کمک می‌کند بلکه باعث جذب بازدیدکنندگانی می‌شود که از طراحی‌های تعاملی بیشتر لذت می‌برند. در ادامه به مثال و توضیحات بیشتری در این خصوص خواهیم پرداخت.
<img src="example.jpg" alt="Example Map" usemap="#image-map">
<map name="image-map">
<area target="_blank" alt="Area 1" title="Area 1" href="http://example1.com" shape="rect" coords="34,44,270,350">
<area target="_blank" alt="Area 2" title="Area 2" href="http://example2.com" shape="circle" coords="337,300,44">
<area target="_blank" alt="Area 3" title="Area 3" href="http://example3.com" shape="poly" coords="120,44,220,140,245,80">
</map>
توضیح کد
<img src="example.jpg" alt="Example Map" usemap="#image-map">
در این خط، یک تصویر با نام example.jpg تعریف شده است که از ویژگی usemap با مقدار #image-map استفاده می‌کند. این ویژگی تصویر را به نقشه‌ای که در ادامه تعریف می‌شود متصل می‌کند.
<map name="image-map">
این خط یک نقشه با نام image-map ایجاد می‌کند که مناطق تصویر به آن متصل خواهند شد.
<area target="_blank" alt="Area 1" title="Area 1" href="http://example1.com" shape="rect" coords="34,44,270,350">
در اینجا، یک منطقه مستطیلی تعریف شده که با کلیک بر روی آن، لینک به http://example1.com باز می‌شود. مختصات منطقه نیز با استفاده از ویژگی coords تعیین شده است.
<area target="_blank" alt="Area 2" title="Area 2" href="http://example2.com" shape="circle" coords="337,300,44">
این خط یک منطقه دایره‌ای در تصویر تعریف می‌کند که با کلیک بر روی آن، به http://example2.com هدایت می‌شود.
<area target="_blank" alt="Area 3" title="Area 3" href="http://example3.com" shape="poly" coords="120,44,220,140,245,80">
در این بخش، یک منطقه چندضلعی تعریف شده که به http://example3.com لینک می‌شود. مختصات این منطقه نشان دهنده نقاط رأس چند ضلعی هستند.