Image Mapping and Mobile: The Potential Pitfalls

Campaign Manager | Client Services

Image maps within email are not widely used for several reasons. The main reason being that you have less control over the structure of the email in both desktop and mobile view, for example, multiple alt texts for your image is not possible. However, there are instances where this method of linking is necessary.

Using image maps allows you to have a large image with various clickable sections which link to different pages without the need for multiple image slicing and large sections of code.

The main difficulties with this occur when your email template is mobile optimised. Shrinking or inserting an image to be shown only on mobile, will require a new set of coordinates for the mobile links.

In the example code below, we are showcasing how you can pull in an alternative image for those viewing on mobile. This image has its own map to ensure the correct links are shown over the relevant sections of the image.

<td>
<map name="Ban_horizontal">
 <area shape="rect" coords="314,-3,474,296" href="http://www.redeye.com/" target="_blank" />
 <area shape="rect" coords="171,-6,314,296" href="http://www.redeye.com/marketing-automation/" target="_blank" />
 <area shape="rect" coords="475,-4,628,297" href="http://www.redeye.com/email-marketing/" target="_blank" />
 <area shape="rect" coords="8,-4,171,297" href="http://www.redeye.com/user-experience/" target="_blank" />
</map>  
<img src="http://visitor.redeye.com/images/ClientBoxImg_130215.jpg" alt="Main Banner" width="650" height="300" border="0" usemap="#Ban_horizontal" style="display:block; border:none; line-height:1px; font-size:1px" />

 <!--[if !mso]><!-->
<div style="width:0px; height:0px; max-height:0px; overflow:hidden;   display:none; visibility:hidden;">
 <map>
<area shape="rect" coords="3,-2,144,301" href="http://www.redeye.com/" target="_blank" />
 <area shape="rect" coords="153,-3,287,302" href="http://www.redeye.com/marketing-automation/" target="_blank" />
<area shape="rect" coords="7,305,144,610" href="http://www.redeye.com/email-marketing/" target="_blank" />
 <area shape="rect" coords="151,305,292,610" href="http://www.redeye.com/user-experience/" target="_blank" />
</map>
 <img usemap="#Ban_vertical" src="http://visitor.redeye.com/images/ClientBoxImg_130215_m.jpg" alt="Main Banner" border="0" style="display:block; border:none; line-height:1px; font-size:1px;" />
  </div>
<!--<![endif]-->                        
</td>

The purpose of the below scrap of commented out code, is to ‘fix’ an issue within Microsoft Outlook.

<!--[if !mso]><!--> / <!--<![endif]-->

This code needs to encompass the mobile section to prevent all editions of MS Outlook from showing both the desktop and mobile content. Outlook doesn’t show the mobile image, however it does display the mobile mapped links. If this scrap of code is not embedded into the email, any clickable links in the desktop version will be overlaid with the mobile links. As seen in the below screenshot, the mobile links overlay any other links within the email.

Email-Box-(1).PNG

Although all browsers support image maps, using these within your emails will require thorough testing across all email clients and common devices to ensure that the way they are being handled is as you expect.

Share:

RedEyeUK @RedEye UK