Workaround for Image Mapping in Outlook?

Question

I have to create an email signature with ONLY ONE IMAGE. That's not the hard part. This image has multiple icons that need to link to various social networks related to the company. I have tried image mapping and placing the HTML file into the folders of Outlook. I have created other signatures this way but never with image mapping. Outlook seems to strip the image map code making it not work.

Does anybody know of a workaround for this?

I am using Outlook 2010.

Solution 1

Coding HTML emails is notorious pain in the a$$. Mainly because there are dozens of email clients and each one varies widely on the features they support, even if the clients come from the same company, e.g. Outlook. Image maps are just another basic coding practice that has spotty support in the various email clients. Because of that, unless you know what your audience is using to read their mail, its best to avoid using them. I'm not sure of your particular situation, but if you have any say so in how the email is designed and coded, slice up your image to create individual links.

Solution 2

TO DIG UP

I had to do exactly this this morning for the company I work for. Since Outlook does not always allow using the image map in 2021 my solution was very simple. I first cut out the places where my image should be clickable thanks to the guides in Gimp.

Then I created a table in which I put my images and then the links. Works perfectly in Outlook

    <td img{display:block}></td>
<div id="blocfour">
    <table border-width="0" cellspacing="0" cellpadding="0" border-spacing: 0; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;
    >
      <tr>
        <td><img src="steps/Signature_mail_step1-0-1.png" /></td>
        <td><a href="https://www.linkedin.com/company/company_name/?viewAsMember=true"><img src="steps/Signature_mail_step1-1-1.png" /></a></td>
        <td><img src="steps/Signature_mail_step1-2-1.png" /></td>
        <td><a href="https://www.facebook.com/company_name"><img src="steps/Signature_mail_step1-3-1.png" /></a></td>
        <td><a href="https://g.page/r/compagny/review"><img src="steps/Signature_mail_step1-5-1.png" /></a></td>
        <td><img src="steps/Signature_mail_step1-6-1.png" /></td>
        <td><a href="https://www.company_name.fr/"><img src="steps/Signature_mail_step1-7-1.png" /></a></td>
      </tr>

    </table>
</div>

Solution 3

I am a bit late to the party, but came across this today as I had the same requirement (email with one image and image map for links) and thought I'd share what worked for me for any future onlookers.

I noticed if I created the email and then viewed with Internet explorer and clicked File->Send->Page by email then the links did not work in the resulting Outlook email. I use a third party to send emails from but by using IE it gives a quick preview of how it will appear in Outlook. The same markup when sent through the third party system did appear fine in Outlook and the image map links worked.

I then tried sending the same email programmatically with ASP.Net in C# and it also worked in Outlook. So I guess the problem may occur when creating the email directly from Outlook.

It would also be a good idea to add a simple link above the image opting to View in Browser and then link to the file on a server if possible.

The following link has another method that may work. I did not try this because the 3rd party or programmatically worked for me, but they explain that creating from Outlook will not work because Outlook is generating the email source code using mostly VML (Vector Markup Language) http://www.outlook-apps.com/insert-html-to-outlook-emails/