How to create an image map

Cover image

Last days I was on project that I had to create links inside an image (something like a image map), so first I thought that I could create a wrapper for the image and some links with position absolute. Ok? At first look it's ok but when I resized the image was fluid (max-width:100% + height:auto) and then I had to write more CSS to prevent all the resolutions. Problem, right?

So I remember that I used the HTML map tag to do something like this (image map) in a long time ago.

Here is a example:

This is the image that we need to map:

Image Map

Then I use this website: https://www.image-map.net/ that generates the code of the mapping to you. You do not need to calculate the coords manually. Will be something like this:

Image Map 2

So the result will be this:

Image Map 3

As you can see on full resolution the mapping was ok, but when I resized it the links disappeared. Back to zero? No, we can use a plugin the automatically calculates the new coordinates based on image size (or you could do it by yourself :P).

In this case I used https://github.com/clarketm/image-map but you could use any that fits better for you case. So, this is the way to create an image map and maybe someday you have to do one. :)

If you need the full code is here: https://codepen.io/haykou/pen/VBXQqB and any questions feel free to leave a comment!

Final result:

Image Map 4