HTML / CSS > Afficher un drapeau de la langue d'un lien [ L'éditeur JavaScript ]

Fermer

Visiteur non-identifié | Identifiez-vous | Devenir membre
Code perdu ? | Combien de visiteurs sur votre site ?

Article posté par : Xenon_54
Date de mise en ligne : 14-07-2004
Niveau : Assez facile
>> Ajouter un article

Afficher un drapeau de la langue d'un lien

Vous devez premièrement inclure un attribut indiquant la langue du lien : hreflang="en" (par exemple)

<a href="http://www.mysql.com" hreflang="en">MySQL</a>

Ensuite, pour ajouter une image à la suite de votre lien anglais, utilisez ce CSS :

a[hreflang="en"]:after { content: " " url(/img/en.gif); }

Ceci ajoutera l'image se trouvant dans le dossier /img/en.gif.

Exemple

MySQL

Afficher la langue d'un lien

<a href="http://www-fr.mysql.com" hreflang="fr">MySQL</a>

a[hreflang="fr"]:after { content: " (fr)"; }

Exemple

MySQL

Ce code ne fonctionnera que pour les navigateurs les plus respectueux de la norme CSS2. (ce qui n'est pas le cas d'Internet Explorer)

Annotations des visiteurs :

De harlock59 - le 22-01-2007

bonjour à tous !
lors de mes études, j'avais eu un exercice à faire: afficher un drapeau bleu blanc rouge en php uniquement (pas de fichier gif ou jpg évidemment), mais je n'ai aucune idée (souvenir) de comment on fait. svp envoyez moi vos idées.

De KevBrok - le 25-08-2006

leoaltair, IE ne supporte pas les opérations entre crochets (a[hreflang="en"] par exemple) donc ça marchera pas car le code faisant afficher l'image de fond ne sera pas interprété. Une dernière solution reste de mettre des classes pour chaques langues... (class="lang_en" par exemple) Espérons qu'IE7 aura un support du CSS digne de ce nom...

De leoaltair - le 24-10-2005

cela ne marche pas sur IE a cause de :after car IE ne gere pas de nombreuses pseudo-balises.
Il suffit de mettre betement l'image en background sur a et de décaler le texte avec un petit padding, et ca roule !

#text a[rel="inline"] { background: url("images/arrow.png") no-repeat center left; padding: 0 0 0 15px; }

En plus ca marche aussi bien à droite qu'à gauche...

De BobJpg - le 01-07-2005

On pourra peut-être l'intégrer lorsque le nouveau IE sortira? (prochainement).

De Xenon_54 - le 30-12-2004

C'est pourquoi il est écrit:

Ce code ne fonctionnera que pour les navigateurs les plus respectueux de la norme CSS2. (ce qui n'est pas le cas d'Internet Explorer)

De Master_Zoulou - le 30-11-2004

Après test, tous mes navigateurs affichent sans problème, sauf IE 6.0...

Opera 7.54, k-meleon 0.8.2, Netscape Navigator 7.02, Mozilla 1.7.3 et bien entendu Firefox 1.0 affichent sans problème...

De b3j3 - le 13-10-2004

salut!

intéréssant...mais inutile...pour l'instant(qui peut être long...),
en effet,après test,seul firefox
affiche correctement le code.
tests avec ie6,netscape7.02,mozilla,
amaya!?,firefox.

>> Poster une annotation sur cette astuce

Retour à la liste des trucs et astuces

compteur gratuit
actuellement en ligne

PUBLICITE

ANNUAIRE WEBMAST.

Noos
Opérateur cablé vraiment bon pour la TV, peut-etre un peu moins pour le net. Des bonnes offres cependant.
http://www.noos.fr/

Cat : Haut débit
Voir l'annuaire webmaster

LES SCRIPTS :

78 à éditer
68 à copier/coller
247 des membres
2580 sur le web
>> Tous les scripts

LES MEMBRES :

65973 membres
4643 comptes CountUs
1842 comptes myCircle

LES FORUMS :

14 forums
40359 topics
191688 messages
>> Les forums

SONDAGE

La mini-astuce "Referencement" du jour par krucial
Pour savoir combien de pages de votre site sont indexées dans Google, il vous suffit de taper, dans la boite de recherche du moteur : "site:http://www.votresite.com";.
Proposer votre mini-astuce | Archives des mini-astuces

Pseudo :
Code :
	Se souvenir de moi