Coding an interactive map

Image Map Support in HTML Email

8

An image map is an image that contains areas that map to distinct links. Image maps are largely considered antiquated on the web since there are more suitable techniques available and it comes with a host of downsides. However, support for image maps is surprisingly good among the major email clients.

What is an Image Map?

An image map is an image that is linked to a map of areas within the image specified by coordinates and a link. Clicking within the areas within the image will take the user to the associated link.

Codepen image map

The code for the above image map (example on codepen) that contains a clickable rectangle and triangle looks like this:

<img src="https://www.emailonacid.com/images/blog_images/Emailology/2017/2017_imagemap/shapes.jpg" usemap="#image-map" width="600">
<map name="image-map">
 <area target="new" alt="Square" title="Rectangle" href="https://www.google.com/#q=rectangle" coords="30,29,306,153" shape="rect">
 <area target="new" alt="Triangle" title="Triangle" href="https://www.google.com/#q=triangle" coords="323,267,572,26,571,267" shape="poly">
</map>

There are three types of shapes for image maps: rect (rectangle), circle and poly (polygon).

You’d normally need a tool to generate the coordinates such as Dreamweaver or an online service like this.

Support for Image Maps in Email Clients

From my tests, all the major email clients support image maps. Yes, even Microsoft Outlook! Other clients that I’ve tested that works with image maps include, iOS, Apple Mail, Yahoo! Mail, Gmail, Outlook.com, AOL and the Samsung Android client.

Downsides of Image Maps

With all the utility of image maps, there are some distinct drawbacks that you should consider should you decide to use them.

Lack of alt text support.

When an image is blocked by the client, all you see is a single alt text of the image and not the individual links.

Does not work with responsive images.

Since the coordinates are hard coded, you cannot have images that scale to the width of its container as this will cause the coordinates to drift. Images must have fixed width and height dimensions.

Potential confusion in Gmail and Outlook.com.

In Gmail and Outlook.com, the link pointer (hand) will appear even when the user hovers the cursor over areas that are not defined by the image map. Clicking on these areas will highlight the image in its own window and can potentially confuse users which areas contain actual links.

Breaks when iOS and Gmail Android App autoscales images

If the image is autoscaled by the client, the coordinates of the image map will be off. A simple fix is to wrap the image within a table and this will fix this problem.

Link tracking may not work in some ESPs

Some email service providers won’t track clicks if the link is embedded in an image map.

And finally there seems to be a bug in Apple Mail that if the image map is the last piece of content in an email, it loses its links. Granted this situation is highly unlikely, but may come in handy during testing.

Take Away

Contrary to popular belief, image map support in email clients is pretty robust. If you decide to incorporate image maps in your campaigns however, you should definitely consider its many shortcomings before you embark.

Don’t Guess, Test!

At Email on Acid, testing is at the core of our mission. After you’ve finished setting up the perfect design for your campaign, ensure the email looks fantastic in EVERY inbox. Because every client renders your HTML differently, it’s critical to test your email across the most popular clients and devices.

Try us free for 7 days and get unlimited access to email, image and spam testing to ensure you get delivered and look good doing it!

Author: Kyle Lapaglia

Author: Kyle Lapaglia

8 thoughts on “Image Map Support in HTML Email”

  1. We have found issues with tracking links for image maps – our ESP failed to recognize clicks on the image map, resulting in under-reported clicks. Curious to know if anyone else has experienced this issue.

  2. @Isabelle
    Thanks for bringing that up. I think the same is happening with our image maps – the CTR is always much lower than expected but I have no way to say for sure it’s an issue with the image map.

    Another issue I’ve noticed is that in apple mail, you have to tap more than once for the link to be opened. Is this a known issue?

  3. @Isabelle W: Thank you for the bit about ESPs not tracking links in image maps! We’ve updated the article to reflect this downside.

  4. I found that image map is not supported on Microsoft Outlook for iOS with custom domain email account (non-hotmail).

  5. We consistently see images truncated or not fully displayed when clients use image maps. Typically outlook 2013 gives us the most headaches.

  6. I am a spaz. I have made my image map, saved it and have the code from image-maps.com. I have no clue how to use the info to embed the code, insert the graphic along with the code etc into a new MS outlook email. I know how to insert a regular graphic etc but am confused as to the map and where to put the code etc. Please refer me to any resources available – thank you!!

  7. Microsoft Outlook 2010 or later do not support image maps. It will display in the Sent items but once the email comes back the HTML is stripped out.

  8. I am quite new to coding but I am creating a signature for someone. It all works OK, apart from the banner. All icons should be clickable (which seems to work) – but when I paste the signature onto my iPhone, it seems to lose the image mapping functionality. Any ideas?

Comments are closed.