Link to home
Start Free TrialLog in
Avatar of sasnaktiv
sasnaktivFlag for United States of America

asked on

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
Avatar of sasnaktiv
sasnaktiv
Flag of United States of America image

ASKER


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

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>


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

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?
ASKER CERTIFIED SOLUTION
Avatar of Dave Baldwin
Dave Baldwin
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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
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!

Okay, if java is out of the question, is there another way to accomplish a rollover?
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial

So is there a way to rollover without CSS and without java? How was it done before CSS & Java?
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}'.
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial

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