懸停圖像（動畫）在新聞信電子郵件

我想創建一個新聞信出去，將有一個圖像動畫時，有人懸停在它。他們想要在電子郵件中找到正確的裝飾，點擊贏得獎品，當他們懸停在他們身上時，他們會跳舞。我已經在web瀏覽器的基本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的方式來做類似的事情？

我這樣做的人說，他們已經看到它之前完成（如果他們沒有或didnt我不是正面或如果他們只是認爲他們有）

感謝

來源

2013-12-20 user2940062

有點過時了，所以我不知道這篇文章有多精確：http：// stackoverflow。com/questions/2796868/how-to-create-a-hover-effect-in-a-newsletter我想你可能會運氣不佳，試圖合併懸停效果...... –

我在一封工作電子郵件營銷公司

相當多的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只會顯示第一個「仍然」

來源

2013-12-20 23:42:42 Arthur

我很確定懸停在電子郵件中是行不通的但他說他以前見過它，我要求他給我看他看到的那個，他沒有，所以我對此非常懷疑，但只是想我會問。謝謝您的幫助。 – user2940062

經過大量實驗後，我發現了一種在許多主要電子郵件客戶端（如Yahoo Mail和Outlook.com）中呈現的有效的失敗安全「翻轉」圖像方法。由於此代碼未使用背景圖像或Java腳本，即使電子郵件客戶端不支持CSS「：hover」，也會顯示「基本」圖像，該圖標爲此代碼提供支持。因此，所有電子郵件客戶端將顯示基本圖像/圖標（使此代碼失效安全），並且許多客戶端（所有that support ":hover"）都將呈現「滾動」效果。要在您的電子郵件中使用此代碼，只需將您的靜止圖像設置爲第一個「基本」img標籤，然後將跳舞的GIF設置爲第二個「rollover」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>

對於工作的例子，這裏有some rollover social media icons，我作爲一個HTML電子郵件設計的一部分創建。

不幸的是，動畫不會所有電子郵件程序渲染，雖然靜態圖像和鏈接將顯示在任何電子郵件程序罰款甚至連基本的HTML渲染。祝您的通訊順利！

來源

2014-01-29 00:07:59

懸停圖像（動畫）在新聞信電子郵件

回答

相關問題