Using image maps to put multiple links in an image

Today I’d like to show how you can create images in your emails (or other content) that contain multiple links in a single image. This is referred to as an image map. This technique was popular in the early days of digital marketing, but it’s still viable and widely supported today!

Why use an image map?

If you have multiple links to include in a single section of an email, showing them in an image can be more engaging than presenting them in a text only format. For example, you can include a single image with several products and have each one be clickable to a separate product web page. This is a popular technique for sending catalogs or product flyers via email.

How do I make one?

There are several computer programs that can make image maps, Adobe Dreamweaver being the most popular. If you don’t have one of these programs, you can also search the web for “image map generator” to find a quick online tool to create one (if going this route, add your image to the Act-On Image Library and then use the public URL in this tool). In short, the process consists of identifying the areas on the image where you want to include the separate links.

Important: Make sure you get the image into the desired resolution BEFORE mapping it. Large images will be shrunk down to fit in your email, which may cause the link areas to behave in strange ways.

How does it work in Act-On?

Once you’ve created your image map, the output is some HTML code that you can include in either the Rich Text Block’s source code view or the Custom Content Block. The image map will now appear! Act-On will also display each clickthrough in the Sent Message Report so you can track each link separately.

And that’s all there is to it! It’s always a good idea to check your work with a test message, but generally image maps are supported in a wide variety of email clients so they typically have very consistent rendering across devices. If you’ve tried this technique, I’d love to hear any tips you may have.

Kristy Abero

Act-On Team February 25, 2021 21:57

Game changer! Such a great idea for when folks want to use banner images with "buttons" in an email or so many other ideas! Thanks for sharing, Chris.

Juhi Khanchandani March 25, 2021 00:47

Hi Chris,

I've tried this and it does not work. I have tested it through the custome-code function and the Rich Text function as well. Neither of them consisted of the clicks.

Could you please help?

Thanks!

Chris Apgar March 25, 2021 16:02

Hi Juhi - would be happy to take a look. Could you post in the HTML that you've generated with the image map details? If you'd rather not share that publicly you can also email it to knowledgebase@act-on.com.

David Cath July 20, 2023 19:22

Hi,

Image mapping has been successful for emails on desktop, but when testing on mobile, it appears like the mapping is off-kilter. I am using an image with 650px width, so it is cropped correctly before inputting into the email.

Any insight into how this could be fixed?

Comments