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

changer image avec onclick

JavaScript

Vue hybride

Discussions similaires

Partager

Partager