Discussion :

[Beginner.]

Ah ben j'y avais aussi pensé... Et j'ai vu que certains font des chose intéressantes en partant de bouton radio : http://freefrontend.com/css-radio-buttons

Dans ce code : https://codepen.io/RRoberts/pen/kXvVrR par exemple ça donne une idée il y a peut-être moyen de mettre des images de drapeau...

[apdf1]

Re,

Peut être qu'un simple texte avec un drapeau à côté qui représente le pays est plus simple a faire?

[Beginner.]

Peut-être que ce serait mieux d'ouvrir un autre fil pour faire ce "sectionneur" de langues ? Et ce présent fil serait pour l’affichage des langues... ?

[apdf1]

Re,

Ok pourquoi tu veut pas ?

[Beginner.]

Si si, je veux bien... Si tu ouvres un autre fil j'irais...

Je suis en train de regarder comment faire ça avec des boutton radio...

On peut faire sans, d'ailleurs ce serait plus facile pour moi de le faire avec trois image + texte et du JS mais certains penseront qu'on ré-inventent la roue...


As-tu les trois images de drapeau ?

[apdf1]

Re

Oui je vais te les données

[Beginner.]

Et le nom du pays, tu veux qu'il soit placé où ?

[apdf1]

re,

A droite du drapeau

[Beginner.]

Les uns en dessous des autres ?

[apdf1]

re, non les uns à côté des autres

[Beginner.]

Salut,

J'ai fait ça : http://jsbin.com/yefidasiqa/edit?js,output

Le code JS est assez concis.
Pour le reste hélas il y a des bugs* et la présentation n'est pas terrible mais le HTML/CSS est loin d'être ma tasse de thé...

Peut-être que quelqu'un l'améliorera...

* Par exemple cela ne fonctionne pas quand on clique sur l'image du drapeau français mais ça marche si on clique sur le texte "France"...

Je n'ai pas ce bug en dehors de ton code, il y a peut-être un conflit entre les différents styles CSS ???

[apdf1]

Salut Beginner,

Je te remercie, pour les bugs et la présentation c'est bon j'ai résolu le problème tous fonctionne nickel.
Juste une idée qui me viens, sa serais plus logique de l'intégrer dans afficher_cacher le texte. Je m'explique, avoir le selectLangue masquer et lorsque je click sur "afficher le texte" qu'il s'affiche plutôt que l'avoir toujours afficher et qu'il soit uniquement opérationnel lorsque je click sur "afficher le texte".
Je sais pas se que tu en pense?

Je te remercie pour tous et te souhaite une bonne journée

Max

[Invité]

Bonjour,

1- drapeau de langues : ce n'est pas France Angleterre Allemagne, mais Français Anglais Allemand

2- @Beginner.
Peux-tu mettre des commentaires pour expliquer les étapes de ton code?
Ça aiderait grandement notre ami à le comprendre, et à pouvoir le modifier seul par la suite

De plus, COPIE les bouts de code UTILES (HTML + JS) dans le corps du message dans cette discussion) : ce sera plus facile à lire.

3- @apdf1
Si tu ne comprends pas le code, tu ne sauras pas le modifier seul.
Il faut apprendre.

4- quant à ton idée, ce n'est pas difficile à mettre en place.
Tu devrais être capable de l'écrire toi-même.

[apdf1]

Salut jreaux62,

Crois moi je fait tous pour!

Sur le code que tu as mis sur Codepen il fonctionne bien sur codepen mais je n'arrive pas à le faire fonctionner sur mon ordinateur, ou j'ai l'erreur?

Merci et bonne journée

Max

[Beginner.]

Salut,

Ok j'ai donc fait un code en séparant le HTML,CSS, JS...

J'ai mis les noms des langues à la place des noms de pays...

J'ai fait un code sans la carte pour que ce soit plus lisible mais cela devrait être simple de l'intégrer car j'utilise les mêmes noms de balises, de class, d'identifiants...

Voici le lien pour tester : http://jsbin.com/vuguwapeqe/edit?css,js,output

Il manque des commentaires alors si tu as besoin d'explication n'hésite pas à demander...
---------------

Je n'ai pas réussi à centrer verticalement les noms des langues et les drapeaux malgré le CSS : vertical-align: middle; align-content: center;...

Décidément le HTML|CSS et moi ça fait deux...

[apdf1]

Salut Beginner

Je te remercie sa fonctionne nickel, pour le css j'ai tous centrer verticalement les noms des langues et les drapeaux.

je vois que tu ai plus alaise avec le javascript, alors que moi c'est ma bête noir.

Bon je pense que tous fonctionne, si il y aurait un problème je t'enverrai un message.

Je te souhaite une bonne soirée et merci encore.

Max

[Beginner.]

An ben tant mieux...

Et oui chacun sa bête noire...

Je te remercie sa fonctionne nickel, pour le css j'ai tous centrer verticalement les noms des langues et les drapeaux.

Comment tu as fait ?

[apdf1]

re,

Voilà le code que j'ai mis en Css.

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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
                 #tableSelectLangue {
                        position: absolute;top: 50px;left: 230px;
                        display:none; 
                        font-family: Verdana, Geneva, Tahoma, sans-serif;
                        font-size: 13px;
                        margin: 8px;
                        border: 0px solid #ff00f5;
                        margin-left: 40px;}
 
                 #selectLangue {
                        font-family: Courier New, Courier, monospace;
                        font-size: 11px;
                        color: white;
                        margin: 10px;
                        padding: 10px;width: 250px;}
 
                 #selectLangue>td {
                        /* display: inline-block; */
                        vertical-align: middle;
                        align-content: center;
                        height: 20px;
                        padding: 3px}
 
                 #selectLangue>td:hover {
                        cursor: pointer;}
 
                 #selectLangue>td>img {
                        width: 30px;
                        height: 20px;
                        margin-right: 13px;
                        margin-left: 20px;}
 
                 caption{
                        color: #fff;}

@+

Max

[Beginner.]

J'ai essayé mais les noms de langues ne sont toujours pas centrés verticalement alors que c'est le cas avec la carte : http://jsbin.com/yefidasiqa/edit?js,output... :

[apdf1]

Re,

Il faut qu'il sortent de l'iframe sinon sa bugs