changer image avec onclick

Version imprimable

Bonjour , je suis vraiment une bille en javascript pourtant je fais dérouler une div (un script que j'ai récupérer) avec un input .
Je voudrais que l'image du bouton change au click .
Pouvez vous m'aidé svp

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
<html>
<head>
 
<script type="text/javascript">
function toggle(anId)
{
	node = document.getElementById(anId);
	if (node.style.visibility=="hidden")
	{
		// Contenu caché, le montrer
		node.style.visibility = "visible";
		node.style.height = "auto";			// Optionnel rétablir la hauteur
	}
	else
	{
		// Contenu visible, le cacher
		node.style.visibility = "hidden";
		node.style.height = "0";			// Optionnel libérer l'espace
	}
}
 
</script>
 
</head>
 
<body>
 
 
<input type="image" id="fruit1" src="images/offre_sujet/boutton_voir_message.jpg" onClick="toggle('foo')">
<div id="foo">Ce contenu est visible ou non selon le cas</div>
 
 
</body>
</html>

04/02/2009, 11h15
E.Bzz

Bonjour,

Code:

document.getElementById('fruit1').src="url_nouvelle_image";

EDIT : Par contre, tu ferais mieux 'utiliser un simple <img>. Le type="image" étant l'équivalent d'un bouton submit.

A+

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function toggle(image, anId)
{
	node = document.getElementById(anId);
	if (node.style.visibility=="hidden")
	{
		// Contenu caché, le montrer
		node.style.visibility = "visible";
		node.style.height = "auto";			// Optionnel rétablir la hauteur
		image.src = "new_image.gif";
	}
	else
	{
		// Contenu visible, le cacher
		node.style.visibility = "hidden";
		node.style.height = "0";			// Optionnel libérer l'espace
		image.src = "old_image.gif";
	}
}

Code:

<input type="image" id="fruit1" src="images/offre_sujet/boutton_voir_message.jpg" onClick="toggle(this, 'foo')">

ça marche nikel merci chef par contre probleme mon input se trouve dans une bouble while php quand un membre poste une offre il doit se repetea chaque fois , mais les bouton qui se repete eux agissent toujours sur la premiere div deroulante

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
<?php
/****************************************************OFFRE POSTER **************************************************/
 
$sql=mysql_query('SELECT * FROM offre_sujet WHERE correspondance_sujet="'.$_GET['sujet-numero'].'" ')or die('Erreur SQL !<br>'.$sqll.'<br>'.mysql_error()); 
        while ($data = mysql_fetch_array($sql))
     {  
?>
  <table class="tableau_offre_sujet" cellpadding="0" cellspacing="0" border="0">   
 
 <tr>
   <td width="20%" height="40px"><?php echo $data['pseudo'] ; ?></td>
   <td width="20%" align="center"><?php echo $data['temps_realisation']," jours" ; ?></td>
   <td width="10%" align="center"><?php echo $data['tarif']," €" ; ?></td>
   <td width="50%" align="center">faire une fonction</td>
 </tr> 
</table> 
 
<div id="offre_sujet">
<div align="left"><input type="image" id="fruit1" src="images/offre_sujet/boutton_voir_message.jpg" onClick="toggle('foo')"></div>
<div id="foo">sssssssssssssssssssssssssssssssssssssssss</div>
</div>
 
<?php
   }
?>

04/02/2009, 12h09
Bovino

Ben oui, c'est normal, toutes tes divs déroulantes ont le même id :roll:
04/02/2009, 12h11
tiesto95

c'est ce que j'avais compris à mon avis il faut utiliser genre $i=1; while{
Mais je sais pas ou et comment faire peut tu m'ai dé stp ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$sql=mysql_query('SELECT * FROM offre_sujet WHERE correspondance_sujet="'.$_GET['sujet-numero'].'" ')or die('Erreur SQL !<br>'.$sqll.'<br>'.mysql_error());
        $i=0;
	while ($data = mysql_fetch_array($sql))
     {  
?>
  <table class="tableau_offre_sujet" cellpadding="0" cellspacing="0" border="0">   
 
 <tr>
   <td width="20%" height="40px"><?php echo $data['pseudo'] ; ?></td>
   <td width="20%" align="center"><?php echo $data['temps_realisation']," jours" ; ?></td>
   <td width="10%" align="center"><?php echo $data['tarif']," €" ; ?></td>
   <td width="50%" align="center">faire une fonction</td>
 </tr> 
</table> 
 
<div id="offre_sujet">
<div align="left"><input type="image" id="fruit1" src="images/offre_sujet/boutton_voir_message.jpg" onClick="toggle('foo<?php= $i; ?>')"></div>
<div id="foo<?php= $i; ?>">sssssssssssssssssssssssssssssssssssssssss</div>
</div>
 
<?php
    $i++;
   }
?>

ça marche pas
Parse error: parse error
Code:

1 2 <div id="foo<?php = $i; ?>">sssssssssssssssssssssssssssssssssssssssss</div>

04/02/2009, 12h37
E.Bzz

Quand ça fonctionnera, autant le faire pour tous les id ou virer

Code:

id="fruit1"

;)

A+
04/02/2009, 12h43
tiesto95

c'est pas que ça fonctionne pas il y a une erreur de syntaxe je crois
04/02/2009, 12h43
Bovino

Code:

<div id="foo<?php= $i; ?>">sssssssssssssssssssssssssssssssssssssssss</div>

Sans espace...
Si ça passe toujours pas, passe par un classique echo :

Code:

<div id="foo<?php echo $i; ?>">sssssssssssssssssssssssssssssssssssssssss</div>

j'ai plus d'erreur mais c est comme au début il selectionne tjr la premiere div:cry:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
<script type="text/javascript">
 
function toggle(anId)
{
 
	node = document.getElementById(anId);
	if (node.style.visibility=="hidden")
	{
 
 
		// Contenu caché, le montrer
		node.style.visibility = "visible";
		node.style.height = "auto";			// Optionnel rétablir la hauteur
	}
	else
	{
 
		// Contenu visible, le cacher
		node.style.visibility = "hidden";
		node.style.height = "0";			// Optionnel libérer l'espace
	}
}
 
</script>

C'est que tu n'as probablement pas fait tous les ajouts que je t'ai proposé...
Code:

1 2 3 $sql=mysql_query('SELECT * FROM offre_sujet WHERE correspondance_sujet="'.$_GET['sujet-numero'].'" ')or die('Erreur SQL !<br>'.$sqll.'<br>'.mysql_error()); $i=0; while ($data = mysql_fetch_array($sql))
...

Code:

<div align="left"><input type="image" id="fruit1" src="images/offre_sujet/boutton_voir_message.jpg" onClick="toggle('foo<?php= $i; ?>')"></div>

...

Code:

<div id="foo<?php= $i; ?>">sssssssssssssssssssssssssssssssssssssssss</div>

...
Code:

1 2 3 4 <?php $i++; } ?>

04/02/2009, 13h46
tiesto95

Merci ça fonctionne nikel je te remercie de ta patience , de ta compréhension et surtout de ton aide Bonne journée à toi merci:king::yaisse2:
04/02/2009, 14h00
E.Bzz

Non, tant qu'un id est dupliqué ce n'est pas bon :roll:
04/02/2009, 14h03
Bovino

Citation:

Envoyé par E.Bzz

Non, tant qu'un id est dupliqué ce n'est pas bon :roll:

:koi:
Ben oui, c'est bien pour ça que l'on a incrémenté une variable dans le while, pour que les id soient uniques... :?
04/02/2009, 14h08
E.Bzz

Citation:

Envoyé par E.Bzz

Quand ça fonctionnera, autant le faire pour tous les id ou virer

Code:

id="fruit1"

;)

Mais aujourd'hui, personne voit mes posts :(
04/02/2009, 14h15
Bovino

:oops: effectivement, il m'avait échappé celui-là...

Désolé, tu avais évidemment raison !
:calin: