Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Image Maps in Outlook E-mail signatures

    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!

  • #2
    Regular Coder
    Join Date
    Nov 2007
    Location
    Chicago
    Posts
    134
    Thanks
    2
    Thanked 9 Times in 9 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •