Image Maps in Outlook E-mail signatures

Mortonic · 11-16-2009, 04:00 PM

I am trying to make an e-mail signature for my outlook clients but am having problems with using image maps within an e-mail.

The following code works in an internet browser but the image map disappears when I attempt to use it in Outlook.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
      
        <style type="text/css">
        .gmain
        {
            color:#000000;
            font-family:Arial;
            font-size:10pt;
        } 
        </style>

        <div align="left">
            
            <p class="gmain"><br/><br/>EmployeeName<br/>
	        EmployeePosition<br/>
	        Company Name<br/>
	        Tel. 01234 567891<br/>
	        www.company.com<br/>
	        "Blah Blah Blah"<br/></p>

	        <map name="SigMap">
		        <area href="http://www.company.com" shape="rect" coords="135, 56, 235, 66">
		        <area href="mailto:info@company.com" shape="rect" coords="9, 56, 111, 66">
	        </map>
        	
	        <img border="0" src="http://www.company.com/Email/Info.gif" usemap="#SigMap" width="535" height="164"/>
        </div>

</html>

And an alternative version of the code which also works in IE and Firefox but causes the whole image to disappear in Outlook is:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>      
	<style type="text/css">
	
	dl.image_map 
	{
		display:block; 
		width:535px; 
		height:164px; 
		background:url(http://www.company.com/Email/Info.gif); 
		position:absolute; 
		margin:2px auto 2px auto;
	}
	
	a.mailto 
	{
		left:9px; 
		top:56px; 
		background:transparent;
	}
	
	a.mailto 
	{
		display:block; 
		width:100px; 
		height:0; 
		padding-top:10px; 
		overflow:hidden; 
		position:absolute;
	}
	
	a.website 
	{
		left:135px; 
		top:56px; 
		background:transparent;
	}
	
	a.website 
	{
		display:block; 
		width:100px; 
		height:0; 
		padding-top:10px; 
		overflow:hidden; 
		position:absolute;
	}

	.gmain
      {
      	color:#000000;
            font-family:Arial;
            font-size:10pt;
      } 
      
	</style>
</head>

<body>
	<div align="left">
            
      	<p class="gmain"><br/><br/>EmployeeName<br/>
	      EmployeePosition<br/>
	      Company Name<br/>
	      Tel. xxxx xxx xxxx<br/>
	      www.company.com<br/>
	      "Blah Motto Blah"<br/></p>


		<dl class="image_map">
			<dd><a class="mailto" title="" href="mailto:info@company.com"></a></dd>
			<dd><a class="website" title="" href="http://www.company.com/"></a></dd>
		</dl>

	</div>
</body>
</html>

Any suggestions?

Thanks in advance for any help!

arthurakay · 11-16-2009, 08:51 PM

I worked in email marketing a number of years ago, and I remember that a number of HTML/CSS entities didn't consistently work across email clients.

Obviously that was a few years ago, and things may have changed (or maybe not). It also depends on the version of Outlook.

My advice to you is to avoid image maps altogether. They're ugly at best. If you need sections of an image linked, you might be better off exporting the sliced image from Photoshop as a table, linking the individual slices as needed.

My best advice is to not use an email footer that's so complicated. Maybe it looks nice, but in most cases no one cares.