3. Live Preview
Hover over the image below to see the custom path-color overlay and tooltips in action. Try resizing your browser window—the coordinates will scale automatically.
A simple guide to implementing responsive, interactive image maps on your website.
After exporting your map from the editor, simply paste the HTML into your website. Make sure the standalone script is included at the bottom of your page so the map scales perfectly on all devices.
<script src="https://siddharth.at/tools/imap.js"></script>The script uses custom HTML attributes on your <img> tag to calculate scaling and render highlights.
| Attribute | Required | Description |
|---|---|---|
usemap |
Yes | Must match the name of your <map> element (e.g., #Doraemon). |
true-width |
Yes | The original width of the uploaded image in pixels. |
true-height |
Yes | The original height of the uploaded image in pixels. |
show-path |
No | Set to "yes" to draw visible SVG overlays over the clickable areas. |
path-color |
No | Color of the SVG overlay border (e.g., #e8e8e8). Defaults to green. |
path-bg |
No | Color of the SVG overlay background (e.g., #444444). Defaults to path color. |
Hover over the image below to see the custom path-color overlay and tooltips in action. Try resizing your browser window—the coordinates will scale automatically.