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

**tony7000** · 29/01/2009, 20h57

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!!

**herch** · 29/01/2009, 22h51

salut,
voilà un exemple pour t'aider

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**le_chomeur** · 30/01/2009, 09h26

Exemple parfait utilisant le DOM

**tony7000** · 30/01/2009, 12h28

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!

**herch** · 30/01/2009, 12h35

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.

**tony7000** · 30/01/2009, 18h27

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

**herch** · 30/01/2009, 18h54

tu veux dire quoi par

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

**tony7000** · 30/01/2009, 20h17

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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');
	}
}

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

JavaScript

Discussions similaires

Partager

Partager