问题
I am trying to create a news letter to go out that will have an image animate when someone hovers over it. they are suppose to find the correct decoration in the email to click to win the prize so when they hover over them 1 will dance. I have it working just fine in basic html for web browsers, the code I am using is a css background so the upper half of the gif is still and the lower half does the moving and it appears when they mouse over it. In emails css backgrounds dont really work for everyone.
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;
}
and
<a href="/yourlinkhere" class="cssmouseover" alt="Happy Holidays" ></a>
I know emails are very limited on coding for security reasons and all email clients have several rules of their own so i was wondering if there a simple inline hover image code for doing something like this for basic html emails and will work with most email clients? or maybe a different way other than a gif to do something like this?
the person i am doing this for said they have seen it done before (if they did or didnt im not positive or if they just think they have)
thanks
回答1:
I work at an e-mail marketing company
Quite a lot of css stuff is not cross e-mail client supported. Have a look at the list shown at this page http://www.campaignmonitor.com/css/
However, background images ARE possible under some conditions (also in Outlook). See this link for more information: http://www.campaignmonitor.com/blog/post/3363/updated-applying-a-background-image-to-html-email
Here is a link to a tool to create code for background images: http://emailbg.net
Hover actions are not possible at all.
Oh.. and Gif files work in almost any e-mail client, except Outlook (2007 and newer). Outlook will only show the first "still"
回答2:
After much experimenting, I discovered an effective, fail-secure "rollover" image method that renders in many major e-mail clients (such as Yahoo Mail and Outlook.com). Because this code does not use background images or Java Script, a "base" image still appears even if the e-mail client does not support CSS ":hover", which powers this code. Therefore, all e-mail clients will display the base image/icon (making this code fail-secure), and many clients (all that support ":hover") will render the "rollover" effect. To use this code in your e-mail, just set your still image as the first "base" img tag and your dancing GIF as the second "rollover" img tag. Here is the basic CSS and HTML behind the effect:
<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>
For a working example, here are some rollover social media icons that I created as part of an HTML e-mail design.
Unfortunately, the animation will not render in all e-mail programs, although the still image and link will display fine in any e-mail program with even basic HTML rendering. Good luck with your newsletter!
来源：https://stackoverflow.com/questions/20713626/hover-image-animate-in-news-letter-email