Question

我正在尝试创建一个新闻信件，当有人将鼠标悬停在其上时，该信件将会生成图像。他们假设在电子邮件中找到正确的装饰点击以赢得奖品，所以当他们将鼠标悬停在他们身上时，他们会跳舞。我在网络浏览器的基本html中工作得很好，我使用的代码是css背景，所以gif的上半部分仍然是，下半部分移动，当它们鼠标悬停在它上面时出现。在电子邮件中，CSS背景并不适用于所有人。

    a.cssmouseover {
    display:block;
    width:95px;
    height:107px;
    background-image:url('url/moving.gif');
    background-position:0px 0px;
    }
    a.cssmouseover:hover {
    background-position:0px -107px;
    }

和

<a href="/yourlinkhere" class="cssmouseover" alt="Happy Holidays" ></a>

我知道电子邮件在编码时出于安全原因非常有限，并且所有电子邮件客户端都有自己的几个规则，因此我想知道是否有一个简单的内联悬停图像代码，用于为基本的html电子邮件执行此类操作，并且可以使用大多数电邮客户？或者可能采用不同于gif的其他方式来做这样的事情？

我这样做的人说他们之前已经看过它（如果他们做了或者不是我不是积极的，或者他们只是认为他们有）

感谢

Answer 1

我在一家电子邮件营销公司工作

相当多的css内容不支持跨电子邮件客户端。请查看此页面上显示的列表http://www.campaignmonitor.com/css/

但是，在某些情况下（也在Outlook中）可能会出现背景图像。有关详细信息，请参阅此链接：http://www.campaignmonitor.com/blog/post/3363/updated-applying-a-background-image-to-html-email

以下是指向背景图片创建代码的工具的链接：http://emailbg.net

根本无法进行悬停操作。

哦......和Gif文件几乎可以在任何电子邮件客户端中使用，但Outlook（2007和更新版本）除外。 Outlook只会显示第一个“静止”

Answer 2

经过多次实验，我发现了一种有效的，失败安全的“翻转”图像方法，可以在许多主要的电子邮件客户端（例如Yahoo Mail和Outlook.com）中呈现。由于此代码不使用背景图像或Java脚本，即使电子邮件客户端不支持CSS“：hover”，也会出现“基本”图像，这会为此代码提供支持。因此，所有电子邮件客户端将显示基本图像/图标（使此代码失效保护），并且许多客户端（所有that support ":hover"）将呈现“翻转”效果。要在电子邮件中使用此代码，只需将静止图像设置为第一个“基本”img标记，将舞蹈GIF设置为第二个“翻转”img标记。以下是效果背后的基本CSS和HTML：

<style>
a:hover img, a:active img {
width: 0 !important;
height: 0 !important;
display: none !important;
max-width: 0;
max-height: 0;
}

a:hover img.roll, a:active img.roll {
width: 42px !important;
height: 42px !important;
display: inline !important;
max-width: 42px !important;
max-height: 42px !important;
}
</style>

<body style="margin: 0px; padding: 0px; border: 0px; outline: 0px; text-decoration: none; font-size: 100%; width: 100%; height: 100%;">
  <a href="http://example.com" target="_blank" title="Tooltip text" style="margin: 0px; padding: 0px; border: 0px; outline: 0px; text-decoration: none; width: 42px; height: 42px; cursor: pointer;">
    <img class="base" src="http://example.com/example.jpg" alt="Base Image" align="left" style="margin: 0px; padding: 0px; border: 0px; outline: 0px; text-decoration: none; width: 42px; height: 42px;" />
    <img class="roll" src="http://example.com/example.jpg" alt="Hover Image" align="left" style="margin: 0px; padding: 0px; border: 0px; outline: 0px; text-decoration: none; width: 0px; height: 0px;" />
  </a>
</body>

对于一个工作示例，这里是我作为HTML电子邮件设计的一部分创建的some rollover social media icons。

不幸的是，动画不会在所有电子邮件程序中呈现，尽管静态图像和链接在任何具有基本HTML呈现功能的电子邮件程序中都能正常显示。祝你的通讯好运！

悬停在新闻信件电子邮件中的图像（动画）

2 个答案: