[javascript] Bulles à cliquer
Résolu/Fermé
Pomme87
Messages postés
38
Date d'inscription
vendredi 22 juillet 2011
Statut
Membre
Dernière intervention
4 décembre 2011
-
Modifié par Pomme87 le 7/08/2011 à 22:36
Pomme87 Messages postés 38 Date d'inscription vendredi 22 juillet 2011 Statut Membre Dernière intervention 4 décembre 2011 - 9 août 2011 à 23:14
Pomme87 Messages postés 38 Date d'inscription vendredi 22 juillet 2011 Statut Membre Dernière intervention 4 décembre 2011 - 9 août 2011 à 23:14
A voir également:
- [javascript] Bulles à cliquer
- Telecharger javascript - Télécharger - Langages
- A javascript error occurred in the main process - Forum Matériel & Système
- Cliquer ou cliquez sur le lien - Forum Réseaux sociaux
- Évariste souhaite télécharger le logiciel inkscape depuis le site de son éditeur. sélectionnez le résultat de recherche sur lequel il doit cliquer. - Forum Bugs et suggestions
- Comment cliquer sur un lien ? ✓ - Forum Matériel & Système
3 réponses
Mihawk
Messages postés
4313
Date d'inscription
mercredi 29 mars 2006
Statut
Contributeur
Dernière intervention
6 janvier 2015
845
Modifié par Mihawk le 8/08/2011 à 13:30
Modifié par Mihawk le 8/08/2011 à 13:30
Je poste en dessous un code similaire à celui proposé par Groarh.
La différence résidant dans le fait de stocker en variable les index des bulles, et non pas les bulles en elle-même.
J'ai quelque chose de similaire avec la modification de la couleur de texte de mes menus : quand on clique sur un menu, il se colore ; quand on clique sur un autre, il se colore à son tour mais l'anciennement coloré doit redevenir blanc.
Pour cela, tu peux utiliser des noms identiques pour toutes tes bulles, genre "bulle1, "bulle2", ... Et tu stocke le numéro de la bulle actuellement ouverte dans une variable globale :
Ensuite on code la fonction "afficherBulle" appelée lors du clic sur une icône :
Et enfin la fonction de fermeture d'une bulle "seule" (sans cliquer sur une autre) :
Voila... je pense que cela doit fonctionner !
Donc sur tes icones tu ajoutes un "onclick="afficherBulle(indexDeLaBulleCorrespondante);"" et sur tes bulles un "onclick="effacerBulle(indexDeLaBulle);""
Et voilou !
L'avantage des index (bulle1, bulle2, etc...) c'est que c'est plus facilement gérable dans des boucles... mais moins facile à comprendre !
Question de goût :-)
Tant qu'on ne fait pas, on ne sait pas.
La différence résidant dans le fait de stocker en variable les index des bulles, et non pas les bulles en elle-même.
J'ai quelque chose de similaire avec la modification de la couleur de texte de mes menus : quand on clique sur un menu, il se colore ; quand on clique sur un autre, il se colore à son tour mais l'anciennement coloré doit redevenir blanc.
Pour cela, tu peux utiliser des noms identiques pour toutes tes bulles, genre "bulle1, "bulle2", ... Et tu stocke le numéro de la bulle actuellement ouverte dans une variable globale :
indexBulleOuverte = 0; // Vaut 0 si aucune bulle ouverte
Ensuite on code la fonction "afficherBulle" appelée lors du clic sur une icône :
function afficherBulle (indexBulleParam) {
if (indexBulleOuverte != 0){
document.getElementById("bulle"+indexBulleOuverte).style.display = "none";
}
document.getElementById("bulle"+indexBulleParam).style.display = "";
indexBulleOuverte = indexBulleParam;
Et enfin la fonction de fermeture d'une bulle "seule" (sans cliquer sur une autre) :
function effacerBulle(indexBulleParam){
document.getElementById("bulle"+indexBulleParam).style.display = "none";
indexBulleOuverte = 0;
}
Voila... je pense que cela doit fonctionner !
Donc sur tes icones tu ajoutes un "onclick="afficherBulle(indexDeLaBulleCorrespondante);"" et sur tes bulles un "onclick="effacerBulle(indexDeLaBulle);""
Et voilou !
L'avantage des index (bulle1, bulle2, etc...) c'est que c'est plus facilement gérable dans des boucles... mais moins facile à comprendre !
Question de goût :-)
Tant qu'on ne fait pas, on ne sait pas.
Groarh
Messages postés
682
Date d'inscription
vendredi 1 août 2008
Statut
Membre
Dernière intervention
28 juin 2015
185
Modifié par Groarh le 7/08/2011 à 23:51
Modifié par Groarh le 7/08/2011 à 23:51
Haha, voilà un problème intéressant :)
Alors pour faire disparaître la bulle en cliquant dessus, rien de plus simple, tu lui mets un attribut onclick, un petit this.style.display = 'none' et ça passe comme dans du beurre.
Maintenant, pour faire disparaître une bulle quand une autre apparaît, c'est une autre histoire. Y'a plusieurs façons de faire. Le plus simple, même si c'est pas forcément le plus propre, je pense que c'est de passer par une variable globale. Appelons-la bulleVisible. Donc dans ta fonction actuelle qui fait apparaître une bulle, tu fais un truc genre :
Et ensuite, il faut que cette même fonction soit capable de faire disparaître la bulle visible quand on en fait apparaître une autre.
Le problème c'est que la première fois, il n'y a aucune bulle visible. Il faut donc vérifier :
;)
Alors pour faire disparaître la bulle en cliquant dessus, rien de plus simple, tu lui mets un attribut onclick, un petit this.style.display = 'none' et ça passe comme dans du beurre.
Maintenant, pour faire disparaître une bulle quand une autre apparaît, c'est une autre histoire. Y'a plusieurs façons de faire. Le plus simple, même si c'est pas forcément le plus propre, je pense que c'est de passer par une variable globale. Appelons-la bulleVisible. Donc dans ta fonction actuelle qui fait apparaître une bulle, tu fais un truc genre :
...
bulleVisible = document.getElementById('laBulle');
...
Et ensuite, il faut que cette même fonction soit capable de faire disparaître la bulle visible quand on en fait apparaître une autre.
...
bulleVisible.style.display = 'none';
bulleVisible = document.getElementById('laBulle');
...
Le problème c'est que la première fois, il n'y a aucune bulle visible. Il faut donc vérifier :
...
if (bulleVisible) {
bulleVisible.style.display = 'none';
}
bulleVisible = document.getElementById('laBulle');
...
;)
Pomme87
Messages postés
38
Date d'inscription
vendredi 22 juillet 2011
Statut
Membre
Dernière intervention
4 décembre 2011
9 août 2011 à 23:14
9 août 2011 à 23:14
tiptop ! dsl du retard de la réponse, mais tout marche à merveille sur mon site : les internautes devraient être contents !
