How to do image rollovers in HTML email.

A while back I was asked to do an HTML email with an active state rollover image. At first I thought it was impossible, since we all know it’s impossible. You can’t embed Flash movies or videos in HTML email, right? (although you can attach them, of course).

I discovered a technique to embed image rollovers in HTML emails by using a mix of old school and new school technologies. Since JavaScript in email clients is disabled (at least all desktop and decent web versions like Gmail), that is out of the question.

If you thought standards compliance for web browsers was a tough nut to crack, don’t even get me started on HTML/CSS support for email clients. It really is a hundred times worse, with Lotus Notes being the Internet Explorer 6 of email clients. The method described below will not work across every email client, I did try to employ the principles of graceful degradation and as such in email clients that don’t quite understand what’s going on, the link will still work without the hover effect.

A lot has been written about support for CSS layouts in HTML emails, and although I have fully ditched tables for layout in web pages years ago, sadly this is not quite the case if you want your email to even remotely resemble the design the client has approved after various rounds of back and forth between designer and client.

Start with the basics (the “old school” part):

<table>
    <tr>
        <td><a href="#"><img src="#" alt="Link title" /></a></td>
    </tr>
</table>

Do achieve the rollover, we need our linked item to be an image. The rest is going to be done with some clever CSS (the “new school” part).

<table id="contentTable" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td height="25">
			<a style="background-image:url(over.gif);height:25px;display:block;" href="example-1.html">
				<img src="http://chrysalis/simple_html_dom/test/normal.gif" alt="Link title" border="0" />
			</a>
		</td>
	</tr>
</table>