Rollover in HTML eMail fails

I'm having trouble creating rollovers that will function in HTML eMail. There's no problem with them on a web page, but the same code won't work once it's sent as eMail. Also it seems that HTML eMail fails to show table background images. How can that be resolved? Any ideas?
Thanks
LVL 1
sasnaktivAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

sasnaktivAuthor Commented:

Oh! I neglected to mention that I'm talking about image rollovers not text. And they are based on an image map.
Thanks
0
Nenad RajsicCommented:
can you post your code here?
0
sasnaktivAuthor Commented:

Hi Vukovarcan,
Thanks for the attention.
Below is the code I'm sending. The result is a blank page except for the 4 buttons which should give the end user a rollover effect. But it does not!
 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>


<head>
<script type="text/javascript">
function mouseOverTeamA_Yes()
{
document.getElementById("TeamA_Yes").src ="http://DUALcorporation.com/eMail_Templates/Ewha_Invite_04_2010/YesDown.jpg";
}

function mouseOverTeamA_No()
{
document.getElementById("TeamA_No").src ="http://DUALcorporation.com/eMail_Templates/Ewha_Invite_04_2010/NoDown.jpg";
}

function mouseOverTeamB_Yes()
{
document.getElementById("TeamB_Yes").src ="http://DUALcorporation.com/eMail_Templates/Ewha_Invite_04_2010/YesDown.jpg";
}

function mouseOverTeamB_No()
{
document.getElementById("TeamB_No").src ="http://DUALcorporation.com/eMail_Templates/Ewha_Invite_04_2010/NoDown.jpg";
}




function mouseOutTeamA_Yes()
{
document.getElementById("TeamA_Yes").src ="http://DUALcorporation.com/eMail_Templates/Ewha_Invite_04_2010/YesUp.jpg";
}

function mouseOutTeamA_No()
{
document.getElementById("TeamA_No").src ="http://DUALcorporation.com/eMail_Templates/Ewha_Invite_04_2010/NoUp.jpg";
}

function mouseOutTeamB_Yes()
{
document.getElementById("TeamB_Yes").src ="http://DUALcorporation.com/eMail_Templates/Ewha_Invite_04_2010/YesUp.jpg";
}

function mouseOutTeamB_No()
{
document.getElementById("TeamB_No").src ="http://DUALcorporation.com/eMail_Templates/Ewha_Invite_04_2010/NoUp.jpg";

}
</script>

</head>




<body bgcolor="#ffffff" text="#000000">
<title>RSVP</title>
<meta http-equiv="Refresh" content="99999999999960;URL=http://DUALcorporation.com/">
<meta name="robots" content="NOINDEX,NOFOLLOW">
<CENTER>
<table
 style="background-image: url('http://DUALcorporation.com/eMail_Templates/Ewha_Invite_04_2010/EwhaInvite_5.jpg' ); background-repeat: no-repeat;"
 border="0" cellpadding="53" cellspacing="5" height="690" width="655">
  <tbody>
    <tr>
   
<TD align=LEFT Valign=BOTTOM colspan=1  
height='320' Valign=bottom style='FONT-SIZE:18px; font-family:Arial; color: #000000'>
 <A href="MAILTO:xxxxxx@xxxxxx.com?bcc=xxxxxx@xxxxxx.com&amp;subject=Ewha%20RSVP%20Team-A&amp;body=I%20intend%20to%20attend." alt="YES" />
 <img src="http://DUALcorporation.com/eMail_Templates/Ewha_Invite_04_2010/YesUp.jpg" border=0
  alt="YES" id="TeamA_Yes" onmouseOver="mouseOverTeamA_Yes()" onmouseOut="mouseOutTeamA_Yes()" /></A>
 &nbsp;
 <A href="MAILTO:xxxxxx@xxxxxx.com?cc=xxxxxx@xxxxxx.com&amp;subject=Ewha%20RSVP%20Team-A&amp;body=Sorry%21&amp;body=I%20can%20not%20attend.&amp;body=%20" alt="NO" />
 <img src="http://DUALcorporation.com/eMail_Templates/Ewha_Invite_04_2010/NoUp.jpg" border=0
 alt="NO"
 id="TeamA_No" onmouseOver="mouseOverTeamA_No()" onmouseOut="mouseOutTeamA_No()" /></A>
<BR>
<A href="MAILTO:xxxxxx@xxxxxx.com?bbcc=xxxxxx@xxxxxx.com&amp;subject=Ewha%20RSVP%20Team-B&amp;body=I%20intend%20to%20attend." alt="YES" />
 <img src="http://DUALcorporation.com/eMail_Templates/Ewha_Invite_04_2010/YesUp.jpg" border=0
 alt="YES"  id="TeamB_Yes" onmouseOver="mouseOverTeamB_Yes()" onmouseOut="mouseOutTeamB_Yes()"/></A>
 &nbsp;
<A href="MAILTO:xxxxxx@xxxxxx.com?bbcc=xxxxxx@xxxxxx.com&amp;subject=Ewha%20RSVP%20Team-B&amp;body=Sorry%21&amp;body=I%20can%20not%20attend.&amp;body=%20" alt="NO" />
 <img src="http://DUALcorporation.com/eMail_Templates/Ewha_Invite_04_2010/NoUp.jpg" border=0
 alt="NO"  id="TeamB_No" onmouseOver="mouseOverTeamB_No()" onmouseOut="mouseOutTeamB_No()"/></A>
</TD></TR>
    <tr>
   
<TD align=RIGHT Valign=BOTTOM colspan=2  
height='100'  style='FONT-SIZE:9px; font-family:Arial; color: #000000'>
<BR>
<A HREF="http://www.dualcorporation.com" target="new">Created by DUAL Corporation</A><BR>

<P>
</TD></TR>


</TABLE>  

</CENTER>
</body>
</html>


0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Nenad RajsicCommented:
OK the answer is simple:
You cannot use JavaScript in HTML emails because of the security risks involved. As far as I know no mail client will parse java script code.

Regarding your table background image: you need to use inline CCS styles (not in your head area because most clients and public email providers will strip that info) if you want your background to display properly and in every mail client

have a look at this article, it might help you with your work
http://articles.sitepoint.com/article/code-html-email-newsletters

hope that answers your question
0
sasnaktivAuthor Commented:

Thanks for the link Vukovarcan. I will check it out.
But Java does indeed execute in html emails.
Here's an example of one I've used many times with success.

<meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type">
<title></title>
<meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type">
<script language="JavaScript">
<!--
window.open('http://www.PHARMACALL.INFO/','temp','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=850,height=540');
<!--//-->
</script>
<title></title>

So if Java works here, why not elswhere?
0
Dave BaldwinFixer of ProblemsCommented:
Because a lot of email clients will block the external access.  Sometimes you get to say Ok and let it happen.  Other times, your email will get dumped into the Junk mail or just plain deleted without notice.  If you're 'serious' about sending HTML emails, you need Yahoo, Gmail, and Hotmail accounts because the all process email differently including replacing HTML tags they don't like.  I think Comcast's Zimbra does too but I don't have a Comcast account.  Oh, AOL too.  Also you need Outlook, Outlook Express, Thunderbird, and possible SeaMonkey.  Opera also has an email client.  Lotus Notes?  I think Eudora is dead but if your users all used Eudora, you'd have to change everything you did.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Nenad RajsicCommented:
just tested your code in outlook 2007 and nothing happens so it doesn't work for me.

General rules when you create HTML emails. No Java Script and use inline CSS. Depending on your target audience make sure that your emails are displaying properly in yahoo, gmail, msn and outlook.

Most business users will use Outlook. There is a big difference between what's supported in Outlook 2003 and 2007 so if your email displays properly in 2007 then it will work in 2003 as well
0
scrathcyboyCommented:
Whether java, javascript, rollovers or background images work in emails TOTALLY DEPENDS on the way each person has their email client set up.  Most smart people will block javascript (noted above) and Java and any active scripting in emails -- for their own safety.

I for example use the most secure email client there is, and it blocks EVERYTHING on the page, images and external links to other websites -- then it presents you with a button -- "enable remote content" -- if you press this, and take the risk, then it shows images and links, but still no active scripting (depending on what you have set in preferences, and I have all scripting in emails turned off for safety.)

SO the answer to your question is that NO, you cannot force an email user to look at rollovers.  They will not work for 99% of email users, because those people have learned to block this kind of unwanted activity from invading their emails.  An email, after all, is text, and all fancy effects are UNWANTED!
0
sasnaktivAuthor Commented:

Okay, if java is out of the question, is there another way to accomplish a rollover?
0
Nenad RajsicCommented:
css hover function will work in most email clients. As far as i know it doesn't work in gmail.
hover changes your link colour or image when you put your mouse over it
0
sasnaktivAuthor Commented:

So is there a way to rollover without CSS and without java? How was it done before CSS & Java?
0
Dave BaldwinFixer of ProblemsCommented:
It was done in ways that got it 'banned' from email...  I just looked at the fanciest HTML emails that I get, none had image rollovers.  A couple had 'hover' on links like 'a:hover {color:#ff0000}'.
0
Nenad RajsicCommented:
from my marketing experience it's an unwritten rule that you don't have any java, use only inline CSS and make it simple but nice. I normally create 2 versions - 1 completely static styled nicely with css and I always put a link above my newsletter that says : Can't see this email? View the online version. and then in that "online version" I can put whatever I like including JS.

Some simple effects can be achieved by using animated gifs – just make sure that they don’t change too often.

I get HTML emails from Microsoft, VMware, Cisco and Citrix and they all look nice and never contain any flashy effects
0
sasnaktivAuthor Commented:

Okay Guys,
I'll try the Inline CSS hovers. And I want you to know that I'm not doing this for a flashy effect. I'm merely trying to put emphasis on 2 buttons, because previously recipients did not know enough to click in the appropriate place for a response. It's functional and purposful not decorative.
0
sasnaktivAuthor Commented:
I'll follow the advice given. But it's not the end result I was hoping for. I don't think inline CSS can function with an image map. I hope I'm wrong. Thanks for the attention guys.
0
Dave BaldwinFixer of ProblemsCommented:
I know it's not the answer you wanted.  A lot of us have been thru this before as you can see.  As usual, it's the bad behavior of others, spammers and scammers in this case, that have caused these things to be disabled in emails.  Since they can't load external files anymore, they have resorted to malicious attachments that your antivirus has to delete for you.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Email Servers

From novice to tech pro — start learning today.