May 07, 2020 · Everything svg · Web design

The Best Way to Make Image Maps (2020)

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.

An image with 2 buttons
An image with 2 buttons

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.

SVG as image maps

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.

For all the shapes that we want to redirect to any URL, we simply click on the shape, right click and select Insert hyperlink.

The insert hyperlink menu in Vecta.io
The insert hyperlink menu in Vecta.io
Insert a hyperlink into a shape in Vecta.io
Insert a hyperlink into a shape in Vecta.io

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.

The custom events menu under Tools
The custom events menu under Tools
The custom events to be inserted
The custom events to be inserted

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

Putting a hash in the hyperlink
Putting a hash in the hyperlink

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.

Like the article? Give the author some claps.

Share it with your friends!
AUTHOR

Thomas Yip

Founder at vecta.io, created Electra, engineering nerd.

Creating a diagram?

Introducing the world's first SVG editor with javascript based plugins

Learn more...

IF YOU LIKE THIS POST, YOU'LL LIKE THESE TOO

May 15, 2020 · Everything svg · Web Design

How to use fonts in SVG

So you have an SVG with some text and would like them rendered with your selected fonts, how do you do that? Read on to find out more on how to use fonts in your SVG.

May 15, 2020 · Everything svg · Web Design

How to use fonts in SVG

So you have an SVG with some text and would like them rendered with your selected fonts, how do you do that? Read on to find out more on how to use fonts in your SVG.

May 07, 2020 · Everything SVG · Nano SVG Compressor

Convert DXF to SVG with Nano and reduce file size by 90%

Do you have a need to let your users download a DWG or DXF? The problem is, users can't preview the contents until they download a file, and download a viewer. Plus you may have have several thousands of these CAD drawings. Wouldn't it be nice to sho...

Keep yourself updated with the latest development on SVG, Web development, CSS and Javascript.

vecta.io BETA