Create HTML image maps easily with this online tool
HTML image maps were originally developed to enable linking from different areas on an image to a URL.
For instance, the following piece of HTML will display an image with certain parts of it being clickable. Each of the clickable parts lead to an URL denoted by the href attribute.
<map name=”infographic”>
<area shape=”poly” coords=”130,147,200,107,254,219,130,228"
href=”https://developer.mozilla.org/docs/Web/HTML"
target=”_blank” alt=”HTML” />
</map><img usemap=”#infographic” src=”/media/examples/mdn-info2.png” alt=”MDN infographic” />
How to add highlighting to the image maps:
By using an additional javascript library, it’s possible to visually show the areas by highlighting them. One of these libraries is jQuery-maphighlight.
By adding jQuery and maphighlight, the image can now be highlighted by hovering the mouse on the different areas
Copy the following code into an HTML file and open it in the browser to see a demo:
<img id="myimage" usemap="#infographic" src="https://interactive-examples.mdn.mozilla.net/media/examples/mdn-info2.png" alt="MDN infographic" width="260" height="232" /><map name="infographic">
<area shape="poly" coords="130,147,200,107,254,219,130,228"
href="https://developer.mozilla.org/docs/Web/HTML"
target="_blank" alt="HTML" data-maphilight='{"fillColor":"000064","fillOpacity":0.6}' />
<area shape="poly" coords="130,147,130,228,6,219,59,107"
href="https://developer.mozilla.org/docs/Web/CSS"
target="_blank" alt="CSS" />
<area shape="poly" coords="130,147,200,107,130,4,59,107"
href="https://developer.mozilla.org/docs/Web/JavaScript"
target="_blank" alt="JavaScript" />
</map><script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/maphilight/1.4.0/jquery.maphilight.min.js"></script>
<script>$('#myimage').maphilight();</script>
How to create map coordinates:
By using an online tool like https://www.imagemaps.net/ , it’s really easy to create map areas on top of an image and then generate HTML with area coordinates the the shapes.
