The Best Way to Make Image Maps (2020)
Let's assume you have an image with 2 buttons, one that let your users learn more about your products and the other to sign them up.
Traditionally, if you have an image that clicks to a single URL, you can wrap the image with an
<a href="/learn-more.html"> <img src="images/my_image.svg"> </a>
However, if you wanted to direct a user to different URLs depending on where they click on your images, you will be required to use image maps.
The problems with image maps
To let users click on the 2 buttons and redirect to different URLs, you would have to use an image map:
<!-- the image --> <img src="images/my_image.svg" usemap="#image_map"> <!-- the map --> <map name="image_map"> <area href="learn-more.html" target="_blank" shape="rect" coords="370,160,540,200"> <area href="signup.html" target="_blank" shape="rect" coords="590,160,760,200"> </map>
Essentially you will have to create a map and define rectangular regions where users can click on. This would have to be done manually, and as you can imagine, quite an headache to start with.
The options for
shape in the area tag above, are
rect, circle and poly which stands for polygon. There are no arcs nor bezier curves so trying to define the area for the human image above must be done through polygons.
For rectangle, the values for coords are
left, top, right and bottom. For circles, they are
center x, center y, and radius, and there are no ellipse, which must be replaced with polygons.
Trying to remember these options are surely not for the faint hearted.
If you have multiple images, you will need to do all these calculations yourself, for each of the images. Alternatively you can use an online tool, but each of the image must have these maps defined, and if the graphic changes, you will need to do this all over again.
If you require responsive images, you will need to use a plugin, because when the image resize in your responsive page, all these coordinates would have to be recalculated.
You can imagine the amount of work, and the error prone process that is involved, but million dollar question is, there is a better way?
Making image maps the easy way with SVG
Selecting objects and inserting hyperlinks
For all the shapes that we want to redirect to any URL, we simply click on the shape, right click and select Insert hyperlink.
Select to open the page on a new tab, and you are done, easy peasy.
Then export the svg and embed using object tag:
If you want to do it manually, in your svg, select the element and wrap it with an
<a target="_blank" xlink:href="https://vecta.io"> <rect x="1" y="1" width="10" height="10" /> </a>
On the event column, type in
onclick and then on the code column, type in
alert('something'); return false;. These events will be inserted when you export to SVG.
To ensure that your shape have the correct cursors, you would also need to insert a hyperlink, but this time, ensure the hyperlink is "#".
The resulting svg will be:
<a target="_blank" xlink:href="https://vecta.io" onclick="alert('something'); return false;"> <rect x="1" y="1" width="10" height="10" /> </a>
The advantages of SVG images maps
- No need to do manual calculation of rectangles, circles and polygons
- Ability to make a complex shape, including ellipses and bezier curve clickable
- Does not require any plugins
- Does not require any modifications and works well with responsive images
- Works well with any design irrespective of where the buttons are placed
- Does not require any code changes if the design is changed
- Way more maintainable then regular image maps
I sincerely hoped the article has helped you to create image maps easier, and please do let us know in the comments.