Embedding an html with images as hyper links in an Email. I expected Gmail \ outlook to have a built-in solution for it but apparently that is not the case. As every mail client has its own style of presenting the email content, expect some difficulties. One pain that I had is image spacing – making two image to have no space between them. Here are a few approaches I came up using;
Outlook: attach your html file and choose “Insert as text” instead of “Open”.
Gmail: I used a chrome extension
Particular image areas as links
For example, if you have an image with a “Click Here For Details” rectangle and you want it to act as a button.
An attribute that lets you define areas upon an image, and attach them a “href”;
<img src="roshHashana.jpg" width="600" height="800" alt="Planets" usemap="#planetmap"> <href/> <map id="2" name="#planetmap"> <area shape="rect" title="" coords="324,383,465,416" href="http://www.blogs.microsoft.co.il/miziel" target="_self" /> <area shape="rect" title="" coords="298,695,496,720" href=http://www.google.co.il target="_self" /> </map>
You can use an online editor to locate coordinates upon your image.
Use an online image
Use an online image source since most of email clients (senders) wont’ allow you to use a local one. You can use you favorite cloud solution as storage.
<img src=”http://blogs.microsoft.co.il/miziel/wp-content/uploads/sites/1681/2014/04/micSketch1-e1398807251961.png ” width=”600″ height=”800″ alt=”Planets” usemap=”#planetmap”>
Use a binary image source
If you don’t want to host the image yourself, you can always convert it into binary.Use an online converter (Google/Bing search for “image to binary”) and paste the result as an image source.
Reset Client Default css
It might worth a try to ‘reset’ the clients style by using a prepared css that overrides the most of the defaults.