[DOM] Afficher du texte après un clic sur une photo

Version imprimable

29/01/2009, 20h57
tony7000

[DOM] Afficher du texte après un clic sur une photo

Bonjour à tous,

Je débute avec Java et j'aurai bien besoin de votre aide pour réaliser un script qui me permettrait de faire apparaitre du texte sur ma page dès que l'internaute clique sur une photo.

Ma page serait en fait divisée en 2 blocs div : une qui contiendrait des photos et un qui contiendrait du texte.

L'idée est donc que lorsqu'on clique sur une des photos, un texte apparait puis si on clique sur une autre photo, un nouveau texte apparait (à la place du premier), etc, etc

Quel serait le processus pour réaliser ceci ?
Merci d'avance pour votre aide!!

salut,
voilà un exemple pour t'aider

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>
<head>
	<script language="javascript">
		function afficherTexte(texte)
		{
			if (!document.getElementById("div2").hasChildNodes())
				document.getElementById("div2").appendChild(document.createTextNode(texte));
			else
			{
				document.getElementById("div2").removeChild(document.getElementById("div2").firstChild); 
				document.getElementById("div2").appendChild(document.createTextNode(texte));
				}
		}
	</script>
</head>
<body>
<div id="div1">
	<img src="chemin_image1" onClick="afficherTexte('photo1')"/>
	<img src="chemin_image2" onClick="afficherTexte('photo2')"/>
</div>
<div id="div2"></div>
</body>
</html>

30/01/2009, 09h26
le_chomeur

Exemple parfait utilisant le DOM :yaisse2:
30/01/2009, 12h28
tony7000

Bonjour,

Merci bcp pour ce script!! je comprend le principe mais néammoins encore une bête question ..

Les "photo 1" et "photo2" vont devoir être des bloc div que je devrais placer dans mon bloc div2 je suppose ?

Merci d'avance j ai hate de tester ça chez moi ce soir!
30/01/2009, 12h35
herch

salut,
le script ajoute seulement le texte "photo1" ou "photo2" dans div2. il crée un noeud texte composé de ce texte. tu remplaces "photo1" et "photo2" par le texte que tu veux afficher lors du survol des images.
30/01/2009, 18h27
tony7000

désolé mais ça n a absolument pas marché... le texte s affiche dans le div avec les images et il n y a aucune possibilité de cliquer sur l image :(
30/01/2009, 18h54
herch

tu veux dire quoi par

Citation:

le texte s affiche dans le div avec les images et il n y a aucune possibilité de cliquer sur l image

c est à dire que mon texte s affichait directement dans la div 1 et par contre dans la div 2, aucun texte ne s affichait quand je cliquais sur les photos :?

entre temps j ai testé un script qui m a permi d obtenir l effet désiré mais .. malgré tout encore un problème!! mes textes de chaque div s affichent en meme temps lorsque je charge la page!!

quelqu un peut il me dire quel est le problème avec le script ci dessous ?
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <div id="photos"> <a href="javascript:displayDiv('page1');">Lien 1</a> <a href="javascript:displayDiv('page2');">Lien 2</a> </div> <div id="page1"> blabla </div> <div id="page2"> bliblibloblo </div>
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 var list_div = new Array('page1', 'page2'); //Au chargement de la page, on ne laisse affichée que la première div window.onload = function(){ for(var i=1; i<list_div.length; i++){ //On commence la boucle à 1 pour ne pas modifier la première div de la liste var div = document.getElementById(list_div[i]); div.style.display = 'none'; } } function displayDiv(id){ for(var i=0; i<list_div.length; i++){ var div = document.getElementById(list_div[i]); //On rend la div visible si son id est le même que celui passé en paramètre de la fonction, sinon on la masque div.style.display = (div.id == id ? '' : 'none'); } }