The Best Way to Make Image Maps (2020)

May 07, 2020 ·  Thomas Yip
Software Development Director · Web Design · Everything SVG · How to Vecta

Do you have an image with 2 or more buttons that clicks to different destinations. Still using image maps with javascript plugins? Read more to find out how to create responsive image maps the easy way.

The scenario

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> tag:

<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.

Multiple images

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.

Responsive

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

The idea of using SVG in making image maps are not new, but Vecta.io makes it even easier with all the bells and whistles that you would expect.

The idea here is to use SVG's built in interactivity and hyperlinks to make everything clickable and even trigger Javascript codes, and then embedding the image using an object tag.

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:

<object data="images/your_image.svg"></object>

If you want to do it manually, in your svg, select the element and wrap it with an <a> tag:

<a target="_blank" xlink:href="https://vecta.io">
    <rect x="1" y="1" width="10" height="10" />
</a>

Inserting events

To insert javascript events, select the shape, right click and select Tools | Custom events.

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
• Ability to insert Javascript
• 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.

Thomas Yip
Software Development Director

As the creator and founder of Electra Cloud, which is now known as Capital Electra X, he introduced the market to an innovative, disruptive, and fully cloud-native electrical CAD solution. The driving force behind Capital Electra X, he is committed to shaping the future of easy-to-use Electrical CAD software development. Find him on Linkedin.