Rafraichir la grande span si on clique sur une petite span

07 févr. 2011, 16:02

Bonjour,

Je voudrais que lorsqu'un utilisateur clique sur une span qui est sous forme de boutton, la grande span (qui contient 2 differentes span) se rafraichisse et affiche des bouttons desactives.

Voila un schema explicatif sur l'evenement.

Merci

07 févr. 2011, 16:37

Un peu grossièrement, il faut faire quelquechose dans ce genre là :

Code : Tout sélectionner

<script>
function modifie_contenu_GDBox(){

	var e = document.getElementById('GDBox');

	var contenu='';

	contenu+=''
	+'<div id="P1Box">\n'
	+'	<img src="image1bis.gif">\n'
	+'</div>\n'

	+'<div id="P2Box" onClick="modifie_contenu_GDBox();">\n'
	+'	<img src="...">\n'
	+'</div>\n';


	// on peut aussi tenter
	//depart = e.innerHTML;
	//contenu = depart.replace("image1.gif","image1bis.gif");

	e.innerHTML = contenu;


}

</script>




<div id="GDBox">
	
	<div id="P1Box">
		<img src="image1.gif">
	</div>

	<div id="P2Box" onClick="modifie_contenu_GDBox();">
		<img src="...">
	</div>

</div>

10 févr. 2011, 00:00

Un peu complique, est ce possible de l'expliquer stp

10 févr. 2011, 16:26

oui alors, ta page HTML est composés d'éléments, que javascript peut reconnaitre grâce à son id qui doit être unique.

Un <div></div>, un <span></span> un <input>, toute balise peut être considérée comme un élément.

Pour que javascript puisse reconnaitre les éléments, on définit des id pour les balises qui nous intéressent.

ainsi

<div id ="GDBox">...</div>

Si on veut récupérer toutes les informations sur le div de dessus grâce à javascript, on va appeler, dans une fonction JS, l'élémént GDBox grâce à une méthode :

Code : Tout sélectionner

var element = document.getElementById("GDBox");

Maintenant, cet élément à certaines propriétés intéressantes.En particulier son contenu HTML
Ainsi tout ce qui concerne la valeur du contenu HTML de l'élément se met à jour et se retrouve grâce à a propriété inner.html

Code : Tout sélectionner

var element = document.getElementById("GDBox");
var contenu =element.innerHTML;

La fonction, que fait elle?
Elle va construire une chaine de caractère au format HTML, c'est ce qu'on veut avoir au final à l'interieur du div GDBox

Code : Tout sélectionner

var contenu='';

   contenu+=''
   +'<div id="P1Box">\n'
   +'   <img src="image1bis.gif">\n'
   +'</div>\n'

   +'<div id="P2Box" onClick="modifie_contenu_GDBox();">\n'
   +'   <img src="...">\n'
   +'</div>\n';

C'est le même code que celui de la page html initial mais avec le nom de l'image qui change afin qu'une autre image s'affiche.
Maintenant qu'on a construit le futur contenu, on appelle l'élément :

Code : Tout sélectionner

var e = document.getElementById("GDBox");

et on lui affecte son nouveau contenu HTML :

Code : Tout sélectionner

e.innerHTML = contenu;

Voilà, ce qui est important c'est de savoir qu'une fois qu'on a préciser un id à un élément, celui ci doit être unique et on peut le retrouver grâce àà document.getElementById(...);
Ensuite une fois qu'on a retrouvé un élémént, il faut savoir que tout son contenu HTML est symbolisé par la propriété element.innerHTML.
on peut alors affecter les valeurs qu'on veut pour le contenu HTML de l'élément en manipulant cette propriété grâce à des chaines de caractères.

Commence par faire des tests assez simples (des div ne contenant qu'une image par exemple) puis une fois que tu as vu un peu comment ça marche, tu compléxifie le contenu des div

11 févr. 2011, 22:58

Merci pour l'explication, je vais le tester.

Rafraichir la grande span si on clique sur une petite span

Qui est en ligne