changer image avec onclick

**tiesto95** · 04/02/2009, 10h39

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 :

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

**E.Bzz** · 04/02/2009, 11h15

Bonjour,

Code :

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

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+

**Bovino** · 04/02/2009, 11h20

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
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";
	}
}

et

Code html :

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

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

**tiesto95** · 04/02/2009, 11h43

ç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 :

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
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
   }
?>

**Bovino** · 04/02/2009, 12h09

Ben oui, c'est normal, toutes tes divs déroulantes ont le même id

**tiesto95** · 04/02/2009, 12h11

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 ?

**Bovino** · 04/02/2009, 12h19

Code php :

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
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++;
   }
?>

**tiesto95** · 04/02/2009, 12h30

ça marche pas
Parse error: parse error

Code :

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

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

**E.Bzz** · 04/02/2009, 12h37

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

Code :

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

id="fruit1"

A+

**tiesto95** · 04/02/2009, 12h43

c'est pas que ça fonctionne pas il y a une erreur de syntaxe je crois

**Bovino** · 04/02/2009, 12h43

Code :

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

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

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

Code :

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

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

**tiesto95** · 04/02/2009, 12h51

j'ai plus d'erreur mais c est comme au début il selectionne tjr la premiere 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
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>

**Bovino** · 04/02/2009, 13h23

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

Code :

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

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 :

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

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

...

Code :

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

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

...

Code :

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

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

**tiesto95** · 04/02/2009, 13h46

Merci ça fonctionne nikel je te remercie de ta patience , de ta compréhension et surtout de ton aide Bonne journée à toi merci

**E.Bzz** · 04/02/2009, 14h00

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

**Bovino** · 04/02/2009, 14h03

Envoyé par E.Bzz

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

Ben oui, c'est bien pour ça que l'on a incrémenté une variable dans le while, pour que les id soient uniques...

**E.Bzz** · 04/02/2009, 14h08

Envoyé par E.Bzz

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

Code :

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

id="fruit1"

Mais aujourd'hui, personne voit mes posts

**Bovino** · 04/02/2009, 14h15

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

Désolé, tu avais évidemment raison !

changer image avec onclick

JavaScript

Discussions similaires

Partager

Partager