Forum Moderators: open
<a onclick="changeImages('WUContact','WU%20Button%20BW.gif');" onmousedown="changeImages('WUContact','WU%20Button%20negative.gif');return true" onmouseover="changeImages('WUContact','WU%20Button.gif');return true" onmouseout="changeImages('WUContact','WUContact.gif');return true" ><img id="WUContact" src="WUContact.gif" alt="Email the authors" name="WUContact" height="50" width="100" border="0"></a>
(took the mailto: out)
The Javascript looks like this:
<script type="text/javascript">ewrite("name","domain","com");</script>
and refers to an external js file, and I have
<script src="GeneratedItems/fun.js" language="javascript" type="text/javascript"></script>
in the header.
My question (finally) is: where do I insert
<script type="text/javascript">ewrite("name","domain","com");</script>
In order to keep the rollover working, and also to make the script work? (both work fine on their own, just won't work together). The rollover is inside a table cell.
Thanx a mill
<a onmouseover="ewrite('name','domain','com');changeImages('WUContact','WU%20Button.gif');return true">
I would also suggest that you rename your image (and ALL of your other web files) to remove the spaces. Although you might think the "%20" ASCII character replacement has no impact, the percentage sign (%) is often a special character in various scripting languages, and could cause problems.
In Javascript, the % sign is the "modulus" operator, for instance. (var1=12; var2=5; var1 % var2 = 2;). Although you have contained the operator by enclosing it within string delimiters (the apostrophes), you might end up getting things confused.
ewritedocument.writeHow's about posting the
ewrite- oh, and get rid of all the spaces in your image file names :)
<!--
function ewrite(a,b,c,d){
var mail;
var link;
mail=a+"@"+b+"."+c;
if(d == 0){
document.write(mail);
}
else {
link='<a href="mailto:'+mail+'">'+mail+'</a>';
document.write(link);
}
}
// -->
<html>
<head>
<script>
// presumeably an external script
function ewrite(name,domain,topDomain,attrOnly)
{
var mail;
mail="mailto:"+name+"@"+domain+"."+topDomain;
if(attrOnly)
return mail;
else
return '<a href="mailto:'+mail+'">'+mail+'<\/a>';
}</script>
<script>
document.write
(
"<a href=\""+ ewrite('myname','mydomain','com','*attrOnly')+"\""
+" onclick = \"changeImages('WUContact','WU%20Button%20BW.gif');\""
+" onmousedown = \"changeImages('WUContact','WU%20Button%20negative.gif');return true\""
+" onmouseover = \"changeImages('WUContact','WU%20Button.gif');return true\""
+" onmouseout = \"changeImages('WUContact','WUContact.gif');return true\">"
+"<img id=\"WUContact\" src=\"WUContact.gif\" alt=\"Email the authors\" name=\"WUContact\" height=\"50\" width=\"100\" border=\"0\">"
+"<\/a>"
)
</script>
</head>
<body></body>
</html>
It's not possible to incorporate the ewrite function into this without changes. You have other attributes (event handlers), so the whole thing has to go into a doc.write statement. The function itself has been changed to return the string, instead of executing a doc.write itself.
The last arg '*attrOnly' is just a more informative way of entering
trueThe other problem with this is that, if there's no Javascript, there's no email at all on the page.
One drawback is that the address doesn't show in the status bar (you could put the function call into the mouseover handler too, I suppose).
<html>
<head>
<title>set mail</title><script>
function setMail(linkElm, name,domain,topDomain)
{
linkElm.href = "mailto:"+name+"@"+domain+"."+topDomain;
}
</script>
</head><body>
<a href="#"
onclick = "setMail(this,'myname','mydomain','com'); changeImages('WUContact','WU%20Button%20BW.gif');"
onmousedown = "changeImages('WUContact','WU%20Button%20negative.gif');return true"
onmouseover = "changeImages('WUContact','WU%20Button.gif');return true"
onmouseout = "changeImages('WUContact','WUContact.gif');return true">
<img id="WUContact" src="WUContact.gif" alt="Email the authors" name="WUContact" height="50" width="100" border="0">
</a>
</body>
</html>
Another benefit here is with JS-disabled browsers.
This time, your link and image are still on the page. The image could then display your email address, or alternatively, something like this, where the href starts off with a different link:
<a href="contacts.htm" ...>
<img ...>
</a>
If JS is disabled, the user ends up on a page with all relevant contact details, that perhaps has all email addresses as images.
Damn the spammers...
I had no idea calling a script from within a rollover would be quite this complex.
It's not at all complex doing that (see the second method). What can become difficult is using document.write to write a single attribute/value (our href) into a link tag with nested image - we end up having to write the whole lot. In this respect, document.write is harder to use than the equivalent functions in ASP, PHP (which would have no place here, of course).
