Html In an Email – Embedded Buttons

21 בSeptember 2014

tags: ,
no comments

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;

Embedding Html

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.

I6

<map>

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.

Add comment
facebook linkedin twitter email

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*