Après une courte réflexion, je me suis dit qu'il était possible d'adopter un format similaire à celui des microformats et utiliser du Javascript pour créer l'hyperlien dynamiquement. Voici ce à quoi je suis arrivé:
Code : Tout sélectionner
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<style type="text/css">
.mail_contact { font-weight: bold; }
.mail_contact .username { color: green; }
.mail_contact .domain { color: red; }
.mail_contact .subject { display: none; }
</style>
<script type="text/javascript">
window.onload = function () {
var links = document.getElementsByTagName('a');
for (var i = 0, len = links.length; i < len; ++i)
{
if (links[i].className == 'mail_contact')
{
nodes = links[i].childNodes;
for (var j = 0, j_max = nodes.length; j < j_max; ++j)
{
if (nodes[j].tagName == 'SPAN')
{
if (nodes[j].className == 'username' || nodes[j].className == 'domain')
{
links[i].href += nodes[j].innerHTML;
}
else if (nodes[j].className == 'subject')
{
links[i].href += '?subject=' + escape(nodes[j].innerHTML);
}
}
else
{
links[i].href += nodes[j].textContent;
}
}
}
}
}
</script>
</head>
<body>
<a href="mailto:" class="mail_contact"><span class="username">user</span>@<span class="domain">example.com</span><span class="subject">Sujet du mail</span></a>
</body>
</html>Et puisque je n'aime pas faire les choses à moitié voici la version XHTML, qui manipule le DOM plutôt qu'utiliser l'élément non-standard innerHTML :
Code : Tout sélectionner
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<style type="text/css">
mail { font-weight: bold; }
mail username { color: green; }
mail domain { color: red; }
mail subject { display: none; }
</style>
<script type="text/javascript">
window.onload = function ()
{
// Récupère toutes les balises <mail>
var elements = document.getElementsByTagName('mail');
for (var i = 0, i_max = elements.length; i < i_max; ++i)
{
var node = elements[i];
// On récupère la première balise de chaque: <username>, <domain>, <subject>
var username = node.getElementsByTagName('username')[0];
var domain = node.getElementsByTagName('domain')[0];
if (username && domain && username.textContent && domain.textContent)
{
// Adresse email formée à partir des balises
var addr = username.textContent + '@' + domain.textContent;
// On crée un nouvel élément <a>
var anchor = document.createElement('a');
// On définit le lien associé
anchor.href = 'mailto:' + addr;
// Est-ce qu'un sujet est défini ?
var subject = node.getElementsByTagName('subject')[0];
if (subject && subject.textContent)
{
// On ajoute le sujet du mail dans le lien
anchor.href += '?subject=' + escape(subject.textContent);
// On met le sujet du mail en titre du lien
anchor.setAttribute('title', subject.textContent);
}
// On fait une copie de l'élément <mail> et de tous ses descendants,
// qu'on attache à notre élément <a>
anchor.appendChild(node.cloneNode(true));
// On remplace l'élément <mail> par notre nouvel élément <a>
node.parentNode.replaceChild(anchor, node);
}
}
}
</script>
</head>
<body>
<mail><username>user</username>@<domain>example.com</domain><subject>Sujet du message</subject></mail>
</body>
</html>Considérez ces deux exemples domaine public. Vous pouvez les réutiliser, les modifier, les redistribuer et les revendre avec ma bénédiction.