html tips:
e-mail links
(and enhancements
with JavaScript)
Basic e-mail
links
I'm assuming that
you know how to create links to other pages in your html document. Making a link
for e-mail uses the same basic code, with one extra bit added in. As an example,
if your e-mail address is someone@mailmadness.com, you would write the first half
of the link like this (the extra part is in red):
The second half would appear after the text:
(If you use an html editor to create your pages, all you have to do is type mailto: before typing your e-mail address in the html editor window.)
So, to have the words E-mail me appear as an e-mail link, the html line looks like this (with the code in red):
And it would look like this on the browser screen:
JavaScript:
onMouseOver
You may have noticed
as you pass your mouse pointer over the e-mail link that you can see the following
message in the little status bar at the bottom of your browser sreen:
Here's a way to change what people see in that area if their browsers are Java-enabled: Let's say your name is Somebody Someone, and you'd like this message to appear: Somebody Someone is a really nice person . You would put that between single quote marks (') in a code sentence like this:
This code goes inside the first half of the link brackets, as shown in the following example (new code is given in red):
Check out the results:
CAUTION - Don't use any single quote marks or apostrophes (') in the message. If your name is O'Brian, for example, you have to write OBrian, no apostrophy, because a single apostrophy after the O would tell the computer that the quoted part is finished, and result in an error that will mess up the text on the screen. Likewise, be careful of putting 's, as the apostrophe will cause problems.
JavaScript:
Filling in the Subject line
You can insert your
own subject line into the messages people send you. (They are free to change it before
sending it if they want to.) This is useful if, say, you have your e-mail address
at the bottom of a number of web pages, and you'd like to know from which page the
sender accessed your address.
The code goes right inside the mailto: statement. In the example below, the subject line of the mail will say "Hello from the e-mail article". The new code appears below in red, and the link text on the screen is "E-mail me":
The link created by this code appears below. Try clicking it for yourself. It's my e-mail address, so feel free to write your comments about this article and send them to me.
AVOID PROBLEMS:
- Don't forget the
closing quote marks:
<a href="mailto:billp@gol.com
?Subject=Hello from the e-mail article">E-mail me</a>
Most people's problems
with this code (as well as any link code in their html) is caused by forgetting the
closing quotes (").
Hiding your
handiwork
When you pass your
mouse pointer over the e-mail link just above, you'll notice that the subject message
appears in the status window at the bottom of your browser screen. If you'd like
to hide that so a normal mailto:
appears instead,
combine that code with the onMouseOver
code, shown
in the next example (again, new code is in red):
That code above gives you the example below:
JavaScript:
filling in the body of the e-mail message
You may wish to fill
in parts of the body of the e-mail message which people send to you. If you'd like
people to answer specific questions, for example, you can have them appear in the
message when people click your "e-mail" link. Even though you'll be unable
(as far as I know) to specify specific formatting, the questions will be there for
people to answer. (Thanks to Luc Ihli for pointing out that this does not work in Netscape 3.) In the following example, I've only put in a simple starter to
the e-mail message:
Note that I've included the onMouseOver to "hide" the text from the browser's status bar. Here's what the code gives you on your screen; click it to try it out:
JavaScript:
cc'ing messages automatically
You may have a reason for wanting all e-mail to go to two people instead of one.
This next trick is something I've never seen on a web site, but it worked during
testing on a Mac with Netscape 3. The new code is in red; please note that there
is no mailto:
statement
in front of the second e-mail address.
If you want to test it out on your browser, mail me a message in two places:
That's the end of this brief tutorial into making e-mail links with html. I hope you found it useful.
|
Bill Pellowe |