onclick sur un bouton radio : image apparait

Version imprimable

22/03/2011, 12h45
isa150183

onclick sur un bouton radio : image apparait

Bonjour

Je ne sais pas si je suis au bon endroit mais j'ai quelques bases en javascript mais pas grand chose.

Je voudrais faire un formulaire avec des boutons radios et en fonctions de ce qui est coché dans le formulaire, une image apparaît en dessous.

Mais attention, plusieurs images qui vont en faire une seule au final.

Exemple :

Formulaire construisez votre paysage :

- le haut

boutons radios avec au choix : soleil, nuage, oiseaux (plusieurs choix possibles)

-le bas :
boutons radios : maison, arbre, chien

L'image finale sous le formulaire doit etre une seule image JPG.

Quand on décoche le soleil par exemple, l'image doit revenir comme précédemment mais sans le soleil, et quand on coche maison, ca fait apparaître une maison sur l'image (sachant que j'ai des images qui vont se superposer donc je ferai des gif ou png).

J'ai pensé à un php avec gd en img src en iframe ?

J'ai vu des scripts mais tout simples, je n'arrive pas à trouver comment faire, avez vous des pistes ? merci pour votre aide

isa
22/03/2011, 14h48
Loceka

Le plus simple serait peut-être de mettre des divs en position absolute avec des z-index déterminés et de les passer en display:none/block via javascript.
23/03/2011, 12h30
isa150183

je ne sais pasdu tout utiliser les div, avez vous despistes avec du php et javascript ?

bonjour,

pour programmer ce genre de truc il vaut mieux d'utiliser un langage orienté evenement par exemple le javascript (jquery). voici un exemple simple de ce j'ai comprit.

jquery :

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
 
<script language="javascript">
$(document).ready(function(){
 
	$('.imgTh').click(function() { 
 
		var valR= $(this).val();
 
		$('#haut').children('img').css('display','none'); 
		$('#'+valR).css('display','block');
 
		});
 
 
		$('.imgTb').click(function() { 
 
		var valR= $(this).val();
		$('#bas').children('img').css('display','none');
		$('#'+valR).css('display','block');
 
								   });
 
			});
</script>

le html :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
 
Haut <br/>
radio1<input type="radio" class="imgTh" id="radioh1" value="rh1" name="testh"/>
radio2<input type="radio" class="imgTh" id="radioh2" value="rh2" name="testh"/>
 
<br/>
bas <br/>
radio1<input type="radio" class="imgTb" id="radiob1" value="rb1" name="testb"/>
radio2<input type="radio" class="imgTb" id="radiob2" value="rb2" name="testb"/>
<div id="haut">
<img src="images/2.png" style="display:none" id="rh1" />
<img src="images/bacShow.png" style="display:none" id="rh2" />
</div>
 
<div id="bas">
<img src="images/1.png" style="display:none" id="rb1" />
<img src="images/pierp.png" style="display:none" id="rb2" />
</div>

bon chance.

25/03/2011, 10h52
isa150183

merci je vais essayer