Community Forum

Over the years we have built up a community of email marketers, coders and designers that live and breathe email.

Use the Email on Acid Forum like your virtual water cooler: Stop by to discuss email code, quirky clients and fixes and post your issues (with an example of the code) for our community to offer its assistance.

 
   
Interactive icons not working!

psymansays

Newbie
Total Posts:  2
Posted: 21 December 2016 06:41 PM

Hi there!

I was really inspired when I read about some of the interactive design possibilities in this recent blog post (https://www.emailonacid.com/emails/2016/interactive-october.html), however trying to implement and get them to work has been a bit of a fail and I want to know what I’m missing.

I even tried to copy the entire source code of the example email, yet could still not reproduce the effect, so I’m stumped. This sample code below seems to do the trick when in live preview in litmus, but when sent in an email (and viewed both in safari and chrome gmail)... nothing!

Would love some guidance here – what am I missing?

<!doctype html>
<
html>
<
head>
<
meta charset="utf-8">
<
title>Untitled</title>
<
style type="text/css">
#iconArea1:hover {
opacity0;
transition:  all 0.3s linear;


#iconArea1BG {
background-imageurl(https://s23.postimg.org/m4ac79bob/image.png);
background-repeatno-repeat;  
background-size100%
}

</style>
</
head>
<
body>
<
table width="600" cellspacing="0" cellpadding="0" border="0">
<
tr>
<
td id="iconArea1BG">
<
img src="https://s24.postimg.org/a734zx70l/image.png" width="auto" style="border-width:0;width:600px;max-width:auto;height:auto;" id="iconArea1">
</
td>
</
tr>
</
table>
</
body>
</
html

 

Alex Ilhan

Avatar
Administrator
Total Posts:  224
Posted: 22 December 2016 05:21 AM
[ # 1 ]

Hi psymansays,

Welcome to the Email on Acid forums - I’m glad to hear you enjoyed that email and blog!

As for the issue with Gmail you mentioned. Many Gmail accounts are still yet to see the updates that support this sort of code. We’ve noticed, for example, that a lot of UK Gmail accounts are yet to see the roll out.

Luckily, with this code it shouldn’t be an issue. When the icons don’t have the hover effects, they simply default to normal icons. I know this is less than ideal, but we’re being patient with the Gmail rollout.

I hope that clears up your question!

Many thanks,
Alex


 

psymansays

Newbie
Total Posts:  2
Posted: 22 December 2016 04:09 PM
[ # 2 ]

Thanks for the feedback Alex! I’ve been testing these on US-based Gmail accounts, which is strange. Can you confirm instances where this type of functionality works with relative consistency? eg. are there other types of methods I could look at using to product similar “interactivity”?


 

HappysEmails

Newbie
Total Posts:  4
Posted: 10 January 2017 11:39 AM
[ # 3 ]

The interactive also does not work on Yahoo via Firefox or iphone7 but works fine on my Gmail via Firefox.
Any solutions for Yahoo accounts?