[javascript] Bulles à cliquer
Résolu
Pomme87
Messages postés
38
Date d'inscription
Statut
Membre
Dernière intervention
-
Pomme87 Messages postés 38 Date d'inscription Statut Membre Dernière intervention -
Pomme87 Messages postés 38 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
J'ai appris il n'y a pas longtemps à changer la propriété display d'un bloc lorsque je clique sur une icône.
Résultat, ça fait apparaître une bulle en position absolue en dessous de mon icône lorsque je clique dessus. C'était bien le but recherché, mais le problème c'est que les bulles s'entassent par après...
Ma question c'est, comment je pourrais faire en sorte que lorsque que je clique sur la bulle elle disparaît ou lorsque je clique sur une autre icône la bulle disparaît pour laisser place à une autre ?
J'ai appris il n'y a pas longtemps à changer la propriété display d'un bloc lorsque je clique sur une icône.
Résultat, ça fait apparaître une bulle en position absolue en dessous de mon icône lorsque je clique dessus. C'était bien le but recherché, mais le problème c'est que les bulles s'entassent par après...
Ma question c'est, comment je pourrais faire en sorte que lorsque que je clique sur la bulle elle disparaît ou lorsque je clique sur une autre icône la bulle disparaît pour laisser place à une autre ?
A voir également:
- [javascript] Bulles à cliquer
- Telecharger javascript - Télécharger - Langages
- Vérifier un lien avant de cliquer - Guide
- A javascript error occurred in the main process - Forum Handicap / Accessibilté
- Javascript echo ✓ - Forum PHP
- Mettre des bulles sur une photo ✓ - Forum Photo numérique
3 réponses
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.
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');
...
;)