Drapeaux pour les langues (plus simple)

Présentation

Vous avez traduit votre site en plusieurs langues et vous voulez conserver la barre des langues mais aimeriez que ce soit plus explicite. Avec des drapeaux, ce serait plus mieux.

        

hein ouai que c'est plus mieux, voir ici en direct 

Je remercie Giheller du forum pour m'avoir soufflé cette idée.

Comment faire

Il suffit d'écrire un script dans un champ html et de le placer dans une section de Pied de page (large ou petit), et de déposer les images de drapeaux dans les Fichiers additionnels.

Je vous donne le script pour 3 langues,  Français, Anglais et Espagnol, je vous explique ensuite comment ajouter ou supprimer des langues en fonction de votre site.


<script type="text/javascript">
var flag = document.getElementsByClassName("dropdown-toggle");
    for (j = 0; j < flag.length; j++){
        if (flag[j].innerHTML == "Français&nbsp;<small>▼</small>") {
            flag[j].innerHTML = "<img src='_fields/france.gif' style='border:none' />&nbsp;&nbsp;Français&nbsp;<small>▼</small>";}
        else if (flag[j].innerHTML == "English&nbsp;<small>▼</small>") {
            flag[j].innerHTML = "<img src='_fields/angleterre.gif' style='border:none' />&nbsp;&nbsp;English&nbsp;<small>▼</small>";}
        else if (flag[j].innerHTML == "Español&nbsp;<small>▼</small>") {
            flag[j].innerHTML = "<img src='_fields/espagne.gif' style='border:none' />&nbsp;&nbsp;Español&nbsp;<small>▼</small>";}
    }

var flag1 = document.getElementsByClassName("active");
    for (i = 0; i < flag1.length; i++){
        if (flag1[i].innerHTML == "Français") {
            flag1[i].innerHTML = "<img src='_fields/france.gif' style='border:none' />&nbsp;&nbsp;Français";}
        else if (flag1[i].innerHTML == "English") {
            flag1[i].innerHTML = "<img src='_fields/angleterre.gif' style='border:none' />&nbsp;&nbsp;English";}
        else if (flag1[i].innerHTML == "Español") {
            flag1[i].innerHTML = "<img src='_fields/espagne.gif' style='border:none' />&nbsp;&nbsp;Español";}
    }
</script>


Ici, les images ont pour noms,  france.gif, angleterre.gif et espagne.gif. Vous pouvez (ou devez) mettre vos propres noms de fichiers s'ils sont différents (c'est évident). Vous en avez une petite série en téléchargeant flags.zip . Vous pouvez ajouter vos propres images d'une taille de 23x17 px

Supprimer un drapeau

Vous pouvez supprimer un drapeau si vous le voulez, mais si la langue n'est pas utilisée sur votre site, rien ne vous empêche de la conserver, elle ne gènera pas. 

Par exemple pour supprimer l'espagnol, il suffit d'effacer ces lignes,

dans le premier groupe:

        else if (flag[j].innerHTML == "Español&nbsp;<small>▼</small>") {
            flag[j].innerHTML = "<img src='_fields/espagne.gif' style='border:none' />&nbsp;&nbsp;Español&nbsp;<small>▼</small>";}

dans le second groupe:

        else if (flag1[i].innerHTML == "Español") {
            flag1[i].innerHTML = "<img src='_fields/espagne.gif' style='border:none' />&nbsp;&nbsp;Español";}

Ajouter ou remplacer un drapeau

Pour ajouter un drapeau, vous faites un copier des lignes similaires à celles de la suppression que vous collez après chaque groupe et vous remplacez les noms de langue et de pays (nom du drapeau). Puis ajouter l'image du drapeau dans les Fichiers additionnels du champ HTML.

Le nom de la langue est exactement celle indiquée par TOWeb lors de l'ajout dans les Options/Langues. S'il y a des caractères spéciaux, vous pouvez faire un copier/coller du nom.