Discussion :

[apdf1]

Salut Beginner,

Oui sa fonctionne très bien,

Cela ne fonctionne pas pour "Hainaut" car t'en as pas donné la traduction dans ton message

Le problème est qu'il y a des noms qui ne se traduisent pas comme "Hainaut".
C'est vrai que le code parait lourd/compliqué... j'ai environ 400 cartes.
Je me demandai s'il était possible de faire autrement sans passer par une liste déroulante, peut être que tu à une idée?
Je vais essayer avec une autre carte.

Je te remercie beaucoup et te souhaite une très bonne journée.

Max

[Beginner.]

Salut,

- La fonction selectLangue(event) n'est pas trop longue et tu n'as pas à la copier 400 fois : en la modifiant un peu elle pourrait fonctionner pour tous les pays...

- Par contre il y a une chose qui est à chaque fois nécessaire c'est la liste des noms dans les trois langues, ça JavaScript ne l'inventera pas... J'ai vu en faisant une recherche que cela ne semble pas évident à obtenir mine de rien alors comme déjà demandé (c'est important de le savoir) as-tu cette cette liste quelque part ou non ?

- Dans ces 400 cartes que tu as est-ce qu'il y a les noms des régions dans au moins une langue ? Par exemple dans l'exemple (Belgique) que tu as posté qui a mis les noms des régions en français dans les balises <tspan> de class "texte" ? Exemple pour "Anvers" :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<text transform="matrix (1 0 0 1 364.3696 125.7813)"> 
<tspan x="6.7" y="0" class="texte">Anvers</tspan> 
</text>

- Autre question restée sans réponse ( c ar ceci n'apparait pas dans l'exemple que tu as posté) : comment cela se passe au début pour afficher la carte d'un pays ? Comment fais-tu pour sélectionner le pays ?

[apdf1]

Salut Beginner,

Alors je vais essayer d'être le plus possible.

La liste des noms, je les récupère à chaque fois que je fait une carte.

Les noms des régions sont mis par le logiciel c'est à dire que je récupère la carte en svg que j'ouvre dans illustrator et la j'ai les noms, des fois en français des fois en anglais suivant la carte, et moi je doit modifier tous cela. Après je récupère le fichier SVG que je met en HTML.

Comment fais-tu pour sélectionner le pays, J'ai un menu ou là je choisi le pays.

En sachant que je passe par une Iframe.

Si tu as besoin d'autre renseignements je ne bouge pas je te répondrais de suite.

Max

[Invité]

Bonjour,

tu as bien de la chance d'avoir trouvé un gars qui fait tout le boulot pour toi !...


Par contre, @Beginner., ton code est une vraie usine à gaz !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var nomsBelgique = ["Anvers", "Antwerp", "Antwerpen", "Fandre Occidentale", "West Flanders", ................

Dès que tu vas rajouter une langue (ou plus,), ça devient vite ingérable !

Il vaut mieux un array par langue :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
regionsBelgique['fr'] = ["Anvers", "Flandre Occidentale", "Flandre Orientale", ...........];
regionsBelgique['en'] = ["Antwerp", "West Flanders", "East Flanders", ................];
regionsBelgique['de'] = ["Antwerpen", "Westflandern", "OstFlandern", ................];

Il est alors très facile d'ajouter une langue, sans avoir besoin de modifier le reste du script (et plus besoin d'"offset"...)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

regionsBelgique[langueSelectionne][indice]

N.B. Pour info :

• anglais -> 'en'
• allemand-> 'de'

[apdf1]

Bonjour jreaux62

Dit moi tu es toujours aussi sympathique.

Sa doit être quelque chose pour les personnes qui t'entoure?

Max

[Invité]

Non.

Seulement avec ceux qui se tournent les pouces en attendant qu'on code pour eux (et qui ne répondent pas aux questions qu'on leur pose).

[apdf1]

Re,

Alors tu vois, premièrement je me tourne pas les pouces et je n'attend pas que l'on fasse mon boulot.

Deuxièmement je suis un autodidacte.

Troisièmement je suis clouer sur une chaise roulante avec une Sclérose en Plaques si tu veut savoir les con séquencent sur la vie quotidienne je peut te les énumérer.

Perte de mémoire, perte membres petit à petit....... si tu veut je peut continuer

[Invité]

Tu avoueras qu'on ne peut pas le deviner...
Mais quand on te pose 3, 4 fois la même question et que tu n'y réponds pas...

Être autodidacte n'est pas un défaut : j'en suis un aussi !
Et j'ai beaucoup appris ici, sur le site DVP.

Quant à la sclérose en plaques, malheureusement oui, je connais les effets : ma belle-sœur en souffre aussi depuis plus de 30 ans...
Désolé...

[apdf1]

Re,

Pas de problème sans rancune

Bonne soirée

Max

[Beginner.]

Salut,

La liste des noms, je les récupère à chaque fois que je fait une carte.

Les noms des régions sont mis par le logiciel c'est à dire que je récupère la carte en svg que j'ouvre dans illustrator et la j'ai les noms, des fois en français des fois en anglais suivant la carte, et moi je doit modifier tous cela. Après je récupère le fichier SVG que je met en HTML.

Ok donc tu n'as pas de liste toute faite, en plus la langue varie d'une carte à l'autre... Je ne vois pas comment faire sans ces listes donc il va falloir trouver un moyen de les faire... De ton coté penses-tu être en mesure de les faire ?

Il vaut mieux un array par langue :

Oui tout-à-fait, j'y avais pensé mais je n'avais pas envie de recommencer ni de ré-arranger la liste fourni par apdf1...

Par contre je ne connaissais pas la syntaxe regionsBelgique['fr'] = [...]; qui est plus avantageuse que d'utiliser trois noms de tableau (un pour chaque langue)...

Je vais refaire le code en tenant compte de tes remarques...

[apdf1]

Salut Beginner,

Oui je pense que je peu faire les listes au faire et mesure que je fait une carte.

@+

max

[Beginner.]

Ok tant mieux... Est-ce que tu peux les écrire directement comme l'a fait jreaux62 :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
regionsBelgique['fr'] = ["Anvers", "Flandre Occidentale", "Flandre Orientale", ...........]; 
regionsBelgique['en'] = ["Antwerp", "West Flanders", "East Flanders", ................]; 
regionsBelgique['de'] = ["Antwerpen", "Westflandern", "OstFlandern", ................];

Ou bien si c'est trop long pour toi de mettre toutes les guillemets... tu peux faire sans :

#Belgique
Anvers,Flandre Occidentale,Flandre Orientale...
Antwerp,West Flanders,East Flanders...
Antwerpen,Westflandern,OstFlandern...

Ou bien dans une table :

#Belgique

Anvers	Flandre Occidentale	Flandre Orientale	...
Antwerp	West Flanders	East Flanders	...
Antwerpen	Westflandern	OstFlandern	...

Après on pourra les mettre sous forme de tableau avec un code...

[apdf1]

Re,

Je pense que le mieux et de faire une table??

[Beginner.]

Oui ok, moi ça me va...

[Invité]

Me revoilà

Un script qui semble faire la farce : https://codepen.io/jreaux62/pen/jYNJya

(pour l'exemple) :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<input id="langueSelectionnee" type="hidden" value="fr"/>
 
<select id="selectLangue" onchange="setLangue( this.id )">
  <option value="fr" selected="selected">Français</option>
  <option value="en">Anglais</option>
  <option value="de">Allemand</option>
</select>
 
<div>
  <tspan x="7.2" y="0" class="texte">Anvers</tspan>
  <tspan x="7.2" y="0" class="texte">Flandre Occidentale</tspan>
  <tspan x="7.2" y="0" class="texte">Flandre Orientale</tspan>
</div>

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
// Changement des noms en fonction de la langue courante (sélectionnée)
function changeNoms( langueOrigine, langueCourante )
{
  var mapNoms = new Array();
  mapNoms["fr"] = ["Anvers", "Flandre Occidentale", "Flandre Orientale"];
  mapNoms["en"] = ["Antwerp", "West Flanders", "East Flanders"];
  mapNoms["de"] = ["Antwerpen", "Westflandern", "OstFlandern"];
 
  var noms = document.querySelectorAll("tspan.texte");
  var nomsLength = noms.length;
  for (var i = 0; i < nomsLength; i++) {
    var nom = noms[i].textContent;
    var nomTraduit = return_nom_traduit(nom, langueOrigine, langueCourante, mapNoms);
    noms[i].textContent = nomTraduit;
  }
}
// Traduction du nom
function return_nom_traduit(nom, langueOrigine, langueCourante, mapNoms) 
{
  if( langueOrigine == langueCourante )
  {
   return nom; // même langue : pas nécessaire de traduire
  } else {
    var thisIndex = mapNoms[langueOrigine].indexOf(nom);
    if( thisIndex == -1 )
    {
     return nom; // traduction pas trouvée
    } else {
     return mapNoms[langueCourante][thisIndex]; // nom traduit dans la langue courante
    }
  }
}
 
function setLangue( id )
{
  var langueOrigine = document.getElementById( 'langueSelectionnee' ).value;
  var langueCourante = document.getElementById( id ).value;
  document.getElementById( 'langueSelectionnee' ).value = langueCourante; // on remplace la langue sélectionnée
//  alert( langueOrigine + ' / ' +langueCourante );
  changeNoms( langueOrigine, langueCourante );
}
// Initialisation
var langueOrigine = document.getElementById( 'langueSelectionnee' ).value; // langue sélectionnée
var langueCourante = langueOrigine;
window.onload = changeNoms( langueOrigine, langueCourante );

N.B. dans le codepen, j'ai ajouté le "Japonais", pour montrer à quel point il est simple d'ajouter une langue

[Beginner.]

@jreaux62 Je vais regarder ton code...

Sinon comme j'avais dit je l'ai refait en tenant compte de tes remarques : http://jsbin.com/zujogiguho/edit?js,output

[Beginner.]

Ca y est j'ai regardé ton code et découvert que ma fonction chercheNomRegion(nom, langueCourante) existe déjà en natif : Array.prototype.indexOf()...

Merci, du coup je peux encore réduire le code, la fonction devient :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var regionsBelgique = [];
regionsBelgique['fr'] = ["Anvers", "Flandre Occidentale", "Flandre Orientale", "Luxembourg", "Liège", "Namur", "Brabant-Flamand", "Brabant Wallon", "Limbourg", "Hainaut", "Bruxelles"];
regionsBelgique['en'] = ["Antwerp", "West Flanders", "East Flanders", "Luxembourg", "Cork", "Namur", "Flemish Brabant", "Walloon Brabant", "Limburg", "Hainaut", "Brussels"];
regionsBelgique['de'] = ["Antwerpen", "Westflandern", "OstFlandern", "Luxemburg", "lüttich", "Namur", "Flämisch-Brabant", "Wallonisch-Brabant", "Limburg", "Hainaut", "Brüssel"];
 
var langueCourante = "fr";  // langue courante, au début c'est le français
 
function selectLangue(event) {
    var langueSelectionne = event.target.value, indice;
    var noms = document.querySelectorAll("tspan.texte");
 
    for (var i = 0; i < noms.length; i++) {
        indice = regionsBelgique[langueCourante].indexOf(noms[i].textContent);
        if (indice != -1) noms[i].textContent = regionsBelgique[langueSelectionne][indice];
    }
    langueCourante = langueSelectionne;
}

Pour tester : http://jsbin.com/levemeseka/1/edit?js,output
-------------

Sinon j'ai aussi pensé à faire un test du genre if( langueSelectionne == langueCourante ) pour éviter de traduire inutilement quand on sélectionne la même langue mais j'y ai renoncé car il y en a pas besoin avec une liste déroulante car dans un tel cas l’événement onchange n'est pas déclenché...

[apdf1]

Bonjour Beginner, jreaux,

Je vous remercie beaucoup de votre coup de main;

jreaux ton code marche bien sur Codepen, mais je n'arrive pas à le faire fonctionner sur mon ordinateur je pense que j'ai du sauter une étape?

Je voudrais savoir SVP j'ai voulu mettre trois boutons a la place de cette vilaine liste déroulante du style:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<span class="bt_texte" id="bouton_lang" onclick="javascript:changeNoms('texte');">Anglais</span>

sa ne marche pas pourquoi?

Merci et bonne journée

Max

[Beginner.]

Salut ,

Tu fais le test avec quel code? Celui de jreaux62 ? Si oui la fonction changeNoms() ne s'utilise pas comme ça (par exemple tu ne mets pas les bons paramètres...).

De plus son code utilise certaines balises HTML (par exemple le paramètre "langueSelectionnee" est stockée dans une balise input)

Et la fonction setLangue() est lancée lorsque tu changes de langue (regarde l'événement onchange du select)

Sinon est-ce que tu veux utiliser des boutons radio ? Si oui pourquoi utiliser la balise span ?

[apdf1]

Salut Beginner

Non je suis avec ton code.

J’aimerai mettre un drapeau et nom de pays ex: drapeau de France et texte "France" : drapeau de Royaume Uni et texte "Royaume Uni": drapeau de Allemand et texte "Allemand"

Voilà

Bonne soirée

Max