html - 电子邮件动画 gif 中的不同链接区域

Question

我必须创建一个电子邮件模板，该模板将在 Outlook 2002 及更高版本、Thunderbird 3.0 及更高版本、gmail+yahoo+hotmail+aol(在 chrome+firefox+IE、现代安卓设备和 iPhone 5 及更高版本)中阅读。

电子邮件模板将包含一张世界地图的动画 GIF，其中所有大陆都以灰色开头。两秒后，所有大陆同时淡出，每个大陆都会有不同的颜色。

用户应该能够点击每个大洲，这会将他们带到相应的维基百科文章。

我的问题是，满足所有这些要求的最佳方法是什么？我已经有了一些想法，但每个想法都有缺点。我正在考虑的一些想法是:

• 将大陆拼接成矩形并分别加载每个动画 gif。但问题是每张图片可能会在不同的时间完成加载，因此，大陆可能会在不同的时间淡入。

• 将动画 gif 保留为一个完整图像。然后在每个大陆的顶部放置几个，其中 img 是一个透明图像，强制设置合适的宽度和高度。问题是我可能会依赖 position:absolute，这在某些电子邮件客户端中可能表现不佳。

有人有什么建议吗？

Answer 1

除了评论中提到的图像映射，您还可以尝试将 GIF 设置为背景图像，并在前面添加透明的 PNG 超链接。

假设您需要 100% 的支持(尤其是 Outlook)，html 电子邮件中的背景有两种方法。 Outlook 只接受 body 标签中的 background=""。以下是解决此问题的两种方法:VML和 in the body tag . VML 是在特定元素上放置背景的唯一方法。