Hover-Bild (animiert) in news-letter E-Mail

Ich versuche, erstellen Sie einen news-letter zu gehen, die haben ein Bild animieren, wenn jemand schwebt über es. Sie sind wohl zu finden, die richtige Dekoration in der E-Mail klicken, um den Preis zu gewinnen, so, wenn Sie über Ihnen schweben 1 tanzen. Ich habe es funktioniert gut in basic-html für web-Browser, den code, den ich verwende, ist ein css-hintergrund, so dass die Obere Hälfte des gif ist immer noch und in der unteren Hälfte bewegt, und es wird angezeigt, wenn Sie die Maus über Sie. In E-Mails css Hintergründe nicht wirklich Arbeit für alle.

    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;
    }

und

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

Weiß ich E-Mails sind sehr beschränkt auf die Codierung aus Sicherheitsgründen und alle E-Mail-clients müssen einige Regeln Ihrer eigenen, so dass ich Frage mich, ob es eine einfache inline-hover-image code für etwas wie das zu tun für grundlegende html-E-Mails und arbeitet mit den meisten E-Mail-clients? oder vielleicht eine andere Art andere als ein gif, so etwas zu tun?

die person, die ich bin dabei gesagt, Sie habe gesehen, wie er zuvor getan (wenn Sie es Taten oder nicht, ich bin nicht positiv oder, wenn Sie gerade denken, Sie haben)

Dank

Ein wenig veraltet, so dass ich nicht weiß, wie genau dieser Beitrag: stackoverflow.com/questions/2796868/... ich denke, man könnte sein Glück versuchen zu integrieren hover-Effekte...

InformationsquelleAutor user2940062 | 2013-12-20

2

Arbeite ich an einer e-mail-marketing-Unternehmen

Ziemlich viele css-Zeug ist nicht cross-e-mail-client unterstützt. Haben Sie einen Blick auf die Liste zeigt auf dieser Seite http://www.campaignmonitor.com/css/

Allerdings, hintergrund-Bilder SIND möglich, unter gewissen Bedingungen (auch in Outlook). Siehe diesen link für weitere Informationen: http://www.campaignmonitor.com/blog/post/3363/updated-applying-a-background-image-to-html-email

Hier ist ein link zu einem tool zum erstellen von code für die hintergrund-Bilder: http://emailbg.net

Hover-Aktionen überhaupt nicht möglich sind.

Oh.. und Gif-Dateien in nahezu jedem e-mail-client außer Outlook (2007 und höher). Outlook zeigt nur an, das erste "noch"
- Ich war mir ziemlich sicher, dass Sie schweben würde-Arbeit in der E-Mail, aber er sagte, er hatte es gesehen, bevor ich ihn gebeten, mir zu schicken, die er sah und die er nicht es so haben, ich war sehr skeptisch, aber ich dachte, ich würde bitten. vielen Dank für die Hilfe.
InformationsquelleAutor Arthur

Nach viel Experimentieren, entdeckte ich ein wirkungsvolles, fail-secure "rollover" - Bild-Methode, die macht in vielen gängigen e-mail clients (wie z.B. Yahoo Mail und Outlook.com). Da dieser code nicht verwenden, Hintergrundbilder oder Java-Script -, die "Basis" - image scheint immer noch, auch wenn die e-mail-client nicht unterstützt CSS ":hover", die Befugnisse dieser code. Daher alle e-mail-clients zeigt das Basis-image/- icon (das macht dieser code fail-secure), und viele clients (alle dass support ":hover") machen die "rollover" - Effekt. Verwenden Sie diesen code in Ihre e-mail, nur auf dem Bild noch als die erste "base" img-tag "und Ihrem Tanz" GIF " als der zweite "rollover" img-tag. Hier ist die grundlegende CSS-und HTML-hinter der Wirkung:

<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>

Für ein Beispiel, hier sind einige rollover-social-media-Symbole, dass ich als Teil einer HTML-e-mail-design.

Leider wird die animation nicht wiedergegeben, in alle e-mail-Programme, obwohl die noch mit Bild und link wird angezeigt, fein in jedem e-mail Programm, sogar mit grundlegenden HTML-rendering. Viel Erfolg mit Ihrem newsletter!

InformationsquelleAutor Theodore Broda

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.