{RESOLU} Une image comme lien mail en css

Bonjours à toutes et tous

J'ai une petite question, qui pourtant m'a l'air simple, mais à laquelle je ne trouve de réponse nulle part :
Comment fait-on pour transformer une image de fond en lien email en css ? Autrement dit : je souhaite que mes visiteurs, lorsqu'ils cliquent sur la petite image d'un stylo, voient s'ouvrir leur logiciel mail. Est-ce possible ? Merci de vos réponses et bonne soirée.
Xavier
Modifié par XavierD (16 Aug 2008 - 08:29)

Bonsoir Xavier,

Quelque chose comme cela devrait fonctionner :

<a href="mailto:toto@truc.com"><img src="Stylo.png" alt="contactez-nous" /></a>

Je trouve cela un peu "barbare" (forcer l'ouverture du client mail de ton visiteur, personnellement cela me gonfle )

Pourquoi ne pas utiliser un formulaire de contact ?

Cdt,
Sylvain

Bonsoir,

XavierD a écrit :
Comment fait-on pour transformer une image de fond en lien email en css ? Autrement dit : je souhaite que mes visiteurs, lorsqu'ils cliquent sur la petite image d'un stylo, voient s'ouvrir leur logiciel mail.

Ton image de stylo est un pictogramme, c'est à dire une image simple qui symbolise un concept. À ce titre, c'est un contenu, qui pourrait avoir un équivalent textuel. Quand au lien de type mailto:contact@machin.org, c'est là aussi un contenu.

Aucun de ces deux éléments (pictogramme et lien) ne doivent être dans ta feuille de styles! C'est d'ailleurs impossible pour le deuxième (le lien).

Pour rappel:
- contenu = HTML;
- présentation = CSS.

Je te renvoie donc au code HTML (très pertinent) que propose 6l20.

6l20 a écrit :
Je trouve cela un peu "barbare" (forcer l'ouverture du client mail de ton visiteur, personnellement cela me gonfle)

Soyons clair: les liens mailto, c'est bien. Si l'ouverture de ton client mail t'embête, tu peux configurer ton navigateur pour qu'il réagisse autrement au clic sur ce genre de liens. Non, le seul problème c'est quand tu as un lien mailto dont l'intitulé est peu clair et ne permet pas au visiteur de prévoir ce comportement. Selon moi, un lien «Nous contacter» (sous la forme d'un pictogramme ou non) devrait plutôt mener à une page de contact, où on trouvera:
- une information sur la personne ou le service que l'on contacte;
- une information sur les délais de réponse;
- un lien mailto sous la forme <a href="mailto:machin@truc.com">machin@truc.com</a>, ou bien un formulaire de contact, ou encore les deux.

6l20 a écrit :
Pourquoi ne pas utiliser un formulaire de contact ?

Parce que ça prends du temps à coder, parce qu'il faut un serveur qui permette l'envoi d'e-mail et si besoin configurer tout ça aux petits oignons, parce qu'il faut sécuriser ce formulaire et protéger tout ça contre le spam. Bref, c'est pas évident à mettre en place et donc ça ne vaut pas toujours le coup.
Et aussi: un formulaire de contact mal amené (sans les informations que je mentionne plus haut), c'est inefficace. Une adresse email sous la forme prenom.nom@entreprise.com, par exemple, donne au moins une information minimale sur la personne contactée, et réduit l'impression de «bouteille à la mer» qui accompagne souvent l'utilisation d'un formulaire de contact sur un site web.

Ah ce Florent...
J'avais un peu zappé : "... en css"

Biensûr que je peux configurer mon navigateur pour qu'il réagisse autrement au clic sur ce genre de liens...mais, en règle générale, j'évite de cliquer sur ces liens pour toutes les raisons que tu cites, notamment parce que dans bien des cas, je ne sais pas à qui je vais m'adresser (le webmaster ? l'administrateur ?...) que je m'attends, à tord sans doute, à être rediriger vers un formulaire ou vers une page contenant plus de précisions sur les personnes que je peux contacter et qu'effectivement l'ouverture automatique de mon client mail, me pose, à titre tout à fait personnel, "problème".

Ceci dit, tu as mille fois raison, le "mailto" est certainement le moyen le plus simple de procéder, pour peu que l'on y mette les formes (au même titre que les formulaires de contact, il va de soi)

Merci beaucoup. Cela marche parfaitement.