Discussion :

[mussara]

bonjour

je me pose une question:
est il possible au clic sur un bouton de faire afficher du texte dans un div donné qui serait vierge par défaut?

si oui comment dois je procéder???

merci de votre aide

[masu]

Le sujet a ete de nombreuses fois traitées je pense mais bon ...

Code :

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

1
2
3
4
5
6
7
8
function toggle(obj_id) {
	var el = document.getElementById(obj_id);
	if ( el.style.display != 'none' ) {
		el.style.display = 'none';
	} else {
		el.style.display = '';
	}
}

Code :

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

1
2
3
 
<div id="toto">text a afficher/masquer</div>
<input type="button" onclick="toggle('toto')" />

edit dsl, je vien de relire ton poste et j'ai mal lu

Code :

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

1
2
3
4
function replace(obj_id,text) {
	var el = document.getElementById(obj_id);
	el.innerHTML =  text;
}

Code :

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

1
2
3
 
<div id="toto">&nbsp</div>
<input type="button" onclick="replace('toto','le texte')" />

enfait tu peu mettre ton contenu dans un span et passer l'id du span a la fonction toggle

[mussara]

je me suis totalement mal exprimé... je reprends...

j'ai 4 boutons et 1 zone de <div> qui est réservée à l'affichage de 4 textes correspondant à ces 4 boutons

je voudrais qu'au clic sur un bouton il fasse afficher le texte correspondant dans la zone du div ainsi définie...

j'espère que c'est plus clair ...

[mussara]

nos messages se sont croisés

merci beaucoup

[masu]

Du coup j'ai fait quelques tests j'ai fait ca

Code :

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

1
2
3
4
5
var textArray = new Array('texte 1','text 2','text 3','text 4');
function replace(id) {
	var el = document.getElementById('toto');
	el.innerHTML =  textArray[id];
}

Code :

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

1
2
3
4
5
<div id="toto">&nbsp</div>
<input type="button" onclick="replace(0)" value="bouton 1"/>
<input type="button" onclick="replace(1)" value="bouton 2"/>
<input type="button" onclick="replace(2)" value="bouton 3"/>
<input type="button" onclick="replace(3)" value="bouton 4"/>

c'est pas re-utilisable dans plusieurs pages mais c'est simple. J'ai mis en fait le texts dans un tableau js.

[mussara]

merci pour tes tests

je vais en fait récupèrer les valeurs à afficher dans une BD
(donc via Php/MySql)

mais vu mon niveau en js assez faible, c'est toujours bon de voir la syntaxe à utiliser

merci encore et bonne soirée

[mussara]

j'ai continué mes tests mais ça ne fonctionne pas lorsque je suis dans un href d'une image survolée...

le code est:

Code :

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

1
2
3
4
5
6
<script language="javascript">
		function replace(obj_id,text) {
			var el = document.getElementById(obj_id);
			el.innerHTML =  text;
		}
</script>

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
<?php $texte1="le texte 1";$texte2="le texte 2";$texte3="le texte 3";$texte4="le texte 4";?>
<div class='centrecorps_texte'>
	<div class='zone_bouton1'>
		<a href="#" onclick="replace('zone_news','<?php echo $texte1 ?>')" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','images/bout-1-on.jpg',1)"><img name="Image1" border="0" src="images/bout-1-off.jpg"></a>
	</div>
	<div class='zone_bouton2'>
		<a href="#" onclick="replace('zone_news','<?php echo $texte2 ?>')" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','images/bout-1-on.jpg',1)"><img name="Image2" border="0" src="images/bout-1-off.jpg"></a>
	</div>
	<div class='zone_bouton3'>
		<a href="#" onclick="replace('zone_news','<?php echo $texte3 ?>')" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','images/bout-1-on.jpg',1)"><img name="Image3" border="0" src="images/bout-1-off.jpg"></a>
	</div>
	<div class='zone_bouton4'>
		<a href="#" onclick="replace('zone_news','<?php echo $texte4 ?>')" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','images/bout-1-on.jpg',1)"><img name="Image4" border="0" src="images/bout-1-off.jpg"></a>
	</div>
	<div class='zone_news'></div>
</div>

le résultat est qu'il n'écrit rien...

[masu]

si tu peu met un lien et que tu clique dessu le lien s'active alors il va rechager la page.
tu peu pas mettre le js directement sur l'image ?
<div class='zone_bouton1'>
<img name="Image1" border="0" src="images/bout-1-off.jpg" onclick="replace('zone_news','<?php echo $texte1 ?>')" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','images/bout-1-on.jpg',1)">
</div>

[masu]

autre probleme, c'est un id pas une classe

Code :

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

	<div id='zone_news'></div>

[masu]

si tu as besoin des lien alors il faut que la fonction return false pour que l'action du lien ne soit pas activé.

Code :

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

1
2
3
4
5
6
		function replace(obj_id,text) {
			var el = document.getElementById(obj_id);
			el.innerHTML =  text;
			return false;
		}

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
<div class='centrecorps_texte'>
	<div class='zone_bouton1'>
		<a href="#" onclick="return replace('zone_news','le texte 1')">tata<img name="Image1" border="0" src="images/bout-1-off.jpg"></a>
	</div>
	<div class='zone_bouton2'>
		<a href="#" onclick="return replace('zone_news','le texte 2')">titi<img name="Image2" border="0" src="images/bout-1-off.jpg"></a>
	</div>
	<div class='zone_bouton3'>
		<a href="#" onclick="return replace('zone_news','le texte 3')">toto<img name="Image3" border="0" src="images/bout-1-off.jpg"></a>
	</div>
	<div class='zone_bouton4'>
		<a href="#" onclick="return replace('zone_news','le texte 4'); ">tutu<img name="Image4" border="0" src="images/bout-1-off.jpg"></a>
	</div>
	<div id='zone_news'></div>
</div>

[mussara]

merci pour tes conseils avisés...
mon erreur principale était due à l'intervertion de ma classe et de mon id...

Code :

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

1
2
3
4
 
<div class="zone_news">
	<div id='zone_newstexte'><?php echo $texte1 ?></div>
</div>

et là désormais tout fonctionne...

gand merci à toi