I am designing an e-newsletter with an effect like this per my client's instructions.
I know there is no way to use javascript in an email, so I've tried to make it in a stupid way, using overflow:hidden and anchor tags. When I click the appropriate link, the hidden image will scroll up to the visible area. Here's my 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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>demot</title>
<style type="text/css">
.OF {
display:block;
max-height: 100px;
overflow: hidden;
white-space:nowrap;
}
</style>
</head>
<body>
<!-- Save for Web Slices (News_Letter_artwork.jpg) -->
<table id="Table_01" width="595" height="434" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="5">
<img src="images/News_Letter_artwork_01.jpg" width="595" height="155" alt=""></td>
</tr>
<tr style="display:block;">
<td>
<img src="images/News_Letter_artwork_02.jpg" width="50" height="37" alt=""></td>
<td>
<A href="#tab_01"><span><font><img src="images/News_Letter_artwork_03.jpg" width="118" height="37" alt=""></font></span></A></td>
<td>
<A href="#tab_02"><span><img src="images/News_Letter_artwork_04.jpg" width="118" height="37" alt=""></span></span></A></td>
<td>
<A href="#tab_03"><span><img src="images/News_Letter_artwork_05.jpg" width="121" height="37" alt=""></span></span></A></td>
<td>
<img src="images/News_Letter_artwork_06.jpg" width="188" height="37" alt=""></td>
</tr>
<tr style="display:block; max-width: 595px; max-height: 186px; overflow: hidden; white-space:nowrap;">
<td colspan="5">
<h2><a name="tab_01" id="tab_01"></a></h2><img src="images/News_Letter_artwork_07.jpg" width="595" height="186" alt=""><p>
<h2><a name="tab_02" id="tab_02"></a></h2><img src="images/News_Letter_artwork_07b.jpg" width="595" height="186" alt=""><p>
<h2><a name="tab_03" id="tab_03"></a></h2><img src="images/News_Letter_artwork_07c.jpg" width="595" height="186" alt=""><p>
</td>
</tr>
<tr>
<td colspan="5">
<img src="images/News_Letter_artwork_08.jpg" width="595" height="56" alt=""></td>
</tr>
</table>
</body>
</html>
Concerning most of client won't support in div tag, so I've tired to use table to make it, actually, everything's work in browser, but the <a> tag's href will be replaced in email client from #tab_01 to http://mydomain/news.html#tab_01.
When I click it on email client, it opens a new browser window which is not at all what I want. Is it possible to be fixed?
Here's my sending email procedure:
- Upload whole website to server
- Open the page
- Select all and Copy
- Paste to compose windows, and send.
Have I done anything wrong? I've tested Gmail, Hotmail (outlook.com), Yahoo, Apple mail, Outlook 2011 for Mac.