11521 sujets

JavaScript, DOM et API Web HTML5

Comment distinguer les liens web de manière générale sur mon site ?

Bonjour,

Je souhaiterais, comme j'ai déjà vu ailleurs , pouvoir distinguer les liens webs et mails de monsite.

Pour le web, mettre un petit monde et pour les mails une enveloppe.
Apparemment via les styles CSS ça n'est pas possible. Smiley ohwell
J'aimerais faire ça de manière générale sur toutes mes pages.
Du genre.. lorsquele browser affiche mapage, il reconnait automatiquement lorsqu'il y a des liens web .. ou mail... http: ou mailto:..Un peu comme il le fait pour les balises 
<h1>, <h2>
etc...

Qui pourrait me dire comment je peux faire ?

Je vous préviens tout de suite, je ne suis pas une pro, donc s'il y avait une méthode facile et efficace... Smiley lol


Merci d'avance pour vos réponses.
Administrateur
mary a écrit :
Apparemment via les styles CSS ça n'est pas possible. Smiley ohwell

Hello,

En fait, théoriquement c'est tout à fait possible en CSS, avec des sélecteurs d'attributs, par exemple :

a[href^="http:"]:after {
  content: " (web) ";
  }

a[href^=mailto:"]:after {
  content: " (mail) ";
  }


Mais il va falloir attendre que les ancêtres comme IE prennent ces sélecteurs en compte Smiley ohwell
Modifié par Raphael (07 Jul 2006 - 11:31)
Salut, Raphael, que signifie le ^ dans ton selecteur d'attribut? Que c'est une chaine incomplète?
Modifié par coccimaster (07 Jul 2006 - 11:26)
Raphael a écrit :

Hello,

En fait, théoriquement c'est tout à fait possible en CSS, avec des sélecteurs d'attributs, par exemple :

#content a[href^="http:"]:after {
  content: " (web) ";
  }

#content a[href^=mailto:"]:after {
  content: " (mail) ";
  }


Mais il va falloir attendre que les ancêtres comme IE prennent ces sélecteurs en compte Smiley ohwell


Ok, mais là ce n'est que pour une adresse mail ou web spécifique non ?
J'iamerais une solution générale un peu comme sur ce site : http://www.communesplone.be/plonesite. Mon problème est que je neais pas s'il font ça avec une class ou avec un script... Smiley ohwell
Administrateur
coccimaster a écrit :
Salut, Raphael, que signifie le ^ dans ton selecteur d'attribut? Que c'est une chaine incomplète?

Il signifie que "http:" doit être contenu dans la chaine href.

En clair, il s'applique à tous les href qui contiennent au-moins la partie "http:".

a écrit :
Ok, mais là ce n'est que pour une adresse mail ou web spécifique non ?

Non justement, il s'applique dès que le href contient "http:" (c'est alors un site web) ou "mailto:" (c''est alors une adresse email).
Modifié par Raphael (07 Jul 2006 - 11:31)
Administrateur
Je viens de tester le code suivant sur Firefox :

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
a[href^="http:"]:after {
  content: " (web) ";
  }
a[href^=mailto:"]:after {
  content: " (mail) ";
  }
</style>

<title></title>
</head>
<body>
<a href="toto">test</a> - <a href="http://www.toto.com">test</a> - <a href="mailto:toto@titi.com">test</a>
</body>

</html>


C'est assez curieux puisque cela fonctionne très bien pour le lien web, mais rien ne s'affiche pour le mailto Smiley ohwell
En fait, il manque une guillemet dans le selecteur à gauche de mailto
Modifié par coccimaster (07 Jul 2006 - 11:54)
Administrateur
a écrit :
En fait, il manque une guillemet dans le selecteur à gauche de mailto

Exact

Voilà qui fonctionne :
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
a[href^="http:"]:after {
  content: " (web) ";
  }
a[href^="mailto:"]:after {
  content: " (mail) ";
  }

</style>

<title></title>
</head>
<body>
<a href="toto">test</a> - <a href="http://www.toto.com">test</a> - <a href="mailto:toto@titi.com">test</a>
</body>

</html>

Modifié par Raphael (07 Jul 2006 - 11:41)
EDIT: Raphael ayant édité le POST juste au dessus, celui n'a plus de sens
Modifié par coccimaster (07 Jul 2006 - 11:55)
Administrateur
Sujet en doublon avec Comment distinguer les liens web et mail via un css? (que je viens de fermer) Smiley confus

dew a écrit :
c'est possible en ajoutant une classe spécifique au lien...

<a href="mailto:arf@arf.com" class="lien-mail">arf@arf.com</a>
<a href="http://www.arf.com" class="lien-www">www.arf.com</a>


... et en y associant un background par exemple

mary a écrit :
euh non ce n'est pas ça que je veux vraiment...Mais c gentil Smiley smile

J'aimerais que lorsque la page est sur internet, le browser distingue automatiquement les liens webs est mails sans pour autant mettre des class spécifiques... Smiley confus

Vous comprenez ? Comme les styles <h1> peuvent être définis et automatiquement interpétés dans le browser... Smiley smile
Administrateur
coccimaster a écrit :
Salut mary,
il va faloir que tu écive une fonction avec le DOM, en faisant un truc du genre


function lien()
{
  lien = getElementsByTagName('a');
  for (var y=0 ; y<lien.length ; y++)
  {
     ref=lien[y]getAttribute('href');
....
  }

}


Et comme ça tu récupére une chaine avec le href de chaque lien, tu n'a plus qu' a y chercher mailto et appliquer ton style. Appliquer une class à tes lien mailto sera plus simple et plus universel si tu veux mon avis...

Alan a écrit :
Apparement le fait de passer un espace après « mailto: » ne semble pas poser de problème (testé avec Firefox, IE, Opera).
Dans ce cas là il serait possible d'utiliser le sélecteur d'attribut 
a[href~="mailto:"] {}
Je ne le conseillerais pas quand même Smiley ohwell

Si ça ne concerne qu'un Email (ou un petit nombre) 
a[href="mailto:arf@arf.com"],
a[href="mailto:arf2@arf.com"] {}
De toute façon, tout cela n'est pas supporté par Internet Explorer Smiley smile

mary a écrit :
comment je peux faire pour mettre un style aux liens mailto: comme tu me le suggères ?
Les liens 
<a>
je vois masi pas les mailto..

Tu peux m'aider ?
Raphael a écrit :
a[href^="http:"]

Mais il va falloir attendre que les ancêtres comme IE prennent ces sélecteurs en compte Smiley ohwell

A vrai dire comme c'est du CSS3 je ne savais même pas que c'était implémenté par Firefox et Opera. Je viens de tester avec Safari et c'est OK aussi.
Les deux autres ($ et *) également :
a écrit :

[att^="val"]
Représente l'attribut att, sa valeur commençant exactement par le préfixe "val"
[att$=ident]
Représente l'attribut att, sa valeur finissant exactement par le préfixe "ident"
[att*="val"]
Représente l'attribut att, sa valeur contenant au moins une fois la sous-chaîne "val"


Si c'est supporté par Firefox et Opera, guère étonnant que ça le soit avec Safari... Là où c'est plus surprenant, c'est que c'est supporté par IE 7 beta 2 également Smiley eek (en revanche pas les peudo-éléments :before et :after qui sont pourtant du niveau CSS2 Smiley sweatdrop )
Bon en même temps j'imagine que ce n'est pas ce qu'il y a de plus difficile.
Modifié par Alan (07 Jul 2006 - 13:16)
Je viens de lire la page par ton lien Alan, et je me demandé quand tous ses sélecteurs sont censé être implémenté, il faut dire que certains offre des possibilités plutôt jouissives Smiley biggrin Smiley biggrin
Administrateur
Distinguer les liens internes des liens externes par exemple (EDIT: pas testé) Smiley smile
Modifié par Felipe (07 Jul 2006 - 13:24)
Sujet clos
Aller à