Responsive image map

html

responsive-design

web-development

best-practices

byAnton Shumikhin·Mar 5, 2025

To establish a responsive image map, match CSS with fluid images and the rwdImageMaps jQuery plugin to make scalable image map coordinates. You can apply the following setup:

<img src="image.jpg" usemap="#map" class="responsive">

<map name="map">
  <!-- Yep, you can use "rect" and "poly" shapes too. Don't believe me? Google it! 😎 -->
  <area shape="rect" coords="34,44,270,350" href="#" alt="Responsive Area">
</map>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-rwdImageMaps/1.6/jquery.rwdImageMaps.min.js"></script>
<!-- Magic happens down here... just kidding, it's just plain, hard-working JavaScript! -->
<script>$(function() { $('img[usemap]').rwdImageMaps(); });</script>

With this synergistic combo, the image map's hotspots will rescale accurately as the image itself does, keeping the "treasure hunt" cool on all screens.

Evolution of responsive image maps

SVGs – Vector Magic

Switch over to the arcade mode of SVG (Scalable Vector Graphics) when you fancy a modern twist on your old picture maps. No lining-up required, just start playing!

<svg viewBox="0 0 100 100" class="responsive-svg">
  <a xlink:href="#" >
    <!-- Invisible hit areas are like ninja warriors. Deadly yet unseen! 🕵️‍♂️ -->
    <rect x="34" y="44" width="236" height="306" fill-opacity="0" />
  </a>
</svg>

Behold the flexibility and interactivity of SVGs! More points, each maintaining its aspect ratio and responding to user actions.

CSS & HTML – Dressing the hotspots

Simplicity is the ultimate sophistication! Replace those map coordinates with well-dressed CSS-positioned anchor tags draped over a responsive image. It's all about making an entrance!

<div class="image-container" style="position: relative;">
  <img src="image.jpg" class="responsive" alt="Image with overlaid links">
  <!-- Meet new overlaid links... smart, sexy and they don't break the site speedometer! 🏎️ -->
  <a href="#" class="map-overlay" style="position: absolute; top: 20%; left: 30%; width: 20%; height: 10%;"></a>
</div>

HTML and CSS doing Javascript's job? Mean and clean!

Ready for round or square?

When configuring your image map's areas, puncher's chance – rectangular or circular shapes are pretty straightforward to scale:

<map name="map">
  <!-- Circle or a square, pick your fighter!🥊 -->
  <area shape="circle" coords="60,60,25" href="#" alt="Circular Area">
  <area shape="rect" coords="110,160,210,260" href="#" alt="Rectangular Area">
</map>

Quick tip: Help the fighters with proper alt text.

Testing on the fly

It's peeling time! Get your hands dirty and use your browser's Web Inspector tool to uncover what happens behind the scenes.

Next Level with Image Maps

It's all about accessibility

Don't ignore those who can't see the map, provide alt text for every area. Make sure your site is keyboard-friendly, add tabindex!

Toolkit for your journey

Explore zaneray.com to convert image maps into responsive anchor tags. Need some wisdom, or a wise companion? Head to GitHub for a variety of plugins.

Potential dragons on the path

Watch out for shrinking screens or extreme zoom levels! When your image map becomes too small for a user to interact, it's time to draw a new one. Also, keep one eye on older browsers, they need extra attention and testing.

explain-codes / Html / Responsive image map

Linked

How to style SVG with external CSS?



Css list-style-image size



Fill SVG path element with a background-image



How to connect HTML Divs with Lines?



How do I scale a stubborn SVG embedded with the <object> tag?

