Javascript| Aff/caché une div au même endroit
Crabs
-
Crabs -
Crabs -
Bonjour,
J'aurais besoin d'aide pour un script.
J'ai une <MAP> qui contient des area. Chacune contient un href dans lequel je déclenche le javascript.
J'aimerais que quand je clique sur une area de ma map cela m'affiche un texte à côté. Et quand je clique sur une autre area un autre texte s'affiche à la même place que le précédent et le remplace.
Jusqu'à présent j'utilisais ce script:
<script>
function afficher(id)
{
if(document.getElementById(id).style.display == "none")
{ document.getElementById(id).style.display = "block" }
else
{ document.getElementById(id).style.display = "none" }
}
</script>
Et autour de l'élément que je veux cacher/afficher:
<div id="element1" style="display: none;">
<p> texte cacher </p></div>
<div id="element2" style="display: none;">
<p> texte cacher2 </p></div>
Seulement, il ne vas pas pour ce que je veut faire. Car il ne remplace pas le texte1 mais ajoute le texte2 dessous.
Je voudrais que quand on clique sur "lien 1" :
texte 1 s'affiche.
Si on re-clique sur ce lien 1
texte 1 disparait.
Si on clique sur un autre lien 2:
texte 2 s'affiche à la meme place que le texte 1.
J'espère être assez clair pour que vous puissiez m'aider.
Merci.
Crabs.
J'aurais besoin d'aide pour un script.
J'ai une <MAP> qui contient des area. Chacune contient un href dans lequel je déclenche le javascript.
J'aimerais que quand je clique sur une area de ma map cela m'affiche un texte à côté. Et quand je clique sur une autre area un autre texte s'affiche à la même place que le précédent et le remplace.
Jusqu'à présent j'utilisais ce script:
<script>
function afficher(id)
{
if(document.getElementById(id).style.display == "none")
{ document.getElementById(id).style.display = "block" }
else
{ document.getElementById(id).style.display = "none" }
}
</script>
Et autour de l'élément que je veux cacher/afficher:
<div id="element1" style="display: none;">
<p> texte cacher </p></div>
<div id="element2" style="display: none;">
<p> texte cacher2 </p></div>
Seulement, il ne vas pas pour ce que je veut faire. Car il ne remplace pas le texte1 mais ajoute le texte2 dessous.
Je voudrais que quand on clique sur "lien 1" :
texte 1 s'affiche.
Si on re-clique sur ce lien 1
texte 1 disparait.
Si on clique sur un autre lien 2:
texte 2 s'affiche à la meme place que le texte 1.
J'espère être assez clair pour que vous puissiez m'aider.
Merci.
Crabs.
A voir également:
- Javascript| Aff/caché une div au même endroit
- Copie caché - Guide
- Numéro caché - Guide
- Remettre l'ecran a l'endroit - Guide
- Jeux google caché - Guide
- C'est quoi le cache d'une application - Guide
2 réponses
Bonjour,
voila une petite fonction javascript qui pourrait t'aider :
il suffit de l'appeler avec l'id du div contenant ton texte :)
En espérant que ça t'aide ;)
voila une petite fonction javascript qui pourrait t'aider :
var id_element_courant = null ;
function montrer_cacher_elements(id_element)
{
element = document.getElementById(id_element) ;
element_courant = document.getElementById(id_element_courant) ;
if(id_element_courant == id_element) // cacher l'element si on reclique
{
element.style.display = 'none' ;
id_element_courant = null ;
}
else
{
element_courant.style.display = 'none' ;
element.style.display = 'block' ;
id_element_courant = id_element ;
}
}
il suffit de l'appeler avec l'id du div contenant ton texte :)
En espérant que ça t'aide ;)
Salut,
Merci pour ta réponse.
Voilà ce que j'ai fait:
Mais ça ne fonctionne pas. Est-ce que j'ai fait une erreur dans l'interprétation de ton code? :s
Je suis très très nul en javascript XD.
Merci pour ta réponse.
Voilà ce que j'ai fait:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
var id_element_courant = null ;
function montrer_cacher_elements(id_element)
{
element = document.getElementById(id_element) ;
element_courant = document.getElementById(id_element_courant) ;
if(id_element_courant == id_element) // cacher l'element si on reclique
{
element.style.display = 'none' ;
id_element_courant = null ;
}
else
{
element_courant.style.display = 'none' ;
element.style.display = 'block' ;
id_element_courant = id_element ;
}
}
</script>
</head>
<body>
<a href="javascript:montrer_cacher_elements('id_element');"> Clik 1</a>
<div id="id_element" style="display:none">
<p>Liste 1</p>
<ul><li> Element 1</li>
<li> Element 1</li></ul></div>
</body>
</html>
Mais ça ne fonctionne pas. Est-ce que j'ai fait une erreur dans l'interprétation de ton code? :s
Je suis très très nul en javascript XD.