Javascript ou php?

**Benjea** · 29/10/2012, 22h49

Bonjour � tous,

excusez ma question de novice...
j'ai un probl�me � resoudre et je ne sais pas s'il convient de le faire en php ou javascript?
Ni comment le faire...

J'ai une menu d�roulant qui m'affiche une liste de v�hicules.
En fonction du choix, une image du vehicule s'affiche.

J'ai dans la base:
V�hicules:
camion
voiture

Couleurs:
sans couleur
rouge
jaune

J'ai comme images:
voiture sans couleur.jpg
voiture rouge.jpg
voiture jaune.jpg
camion sans couleur.jpg
camion rouge.jpg
camion jaune.jpg

Par defaut, quand je choisis le v�hicule, il s'affiche le v�hicule sans couleur.
C'est en choisissant la couleur que l'image vehicule_sans_couleur.jpg devient vehicule_rouge.jpg par exemple.

Cela implique qu'il faudrait faire un test sur id v�hicule et l'id couleur.
Une fois les 2 test�s, on affiche le vehicule en couleur .jpg...

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
<select name="skin" style="width :132px" onChange="javascript:document.getElementById('vehicule').src = this.value;">
<option value="./images/voiture.png">voiture</option>
<option value="./images/camion.png">camion</option>
</select></label><BR />
 
<select name="skin" style="width :132px" onChange="javascript:document.getElementById('couleur').src = this.value;">
<option value="./images/rouge.png">rouge</option>
<option value="./images/jaune.png">jaune</option>
</select></label><BR />
 
 
<img src="" alt="" id='vehicule'  />

Que me conseillez vous?

**Mahefasoa** · 30/10/2012, 04h05

JavaScript suffit.

Invit� · 30/10/2012, 07h24

Bonjour,
Pour bien faire, il faut que les "value" des 2 select correspondent aux noms des images.
Les noms des images seront de la forme : [vehicule_value]_[couleur_value].png

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
<body onload="affiche_vehicule_couleur();"><!-- affichage initial -->
<form>
<p>
	<label for="idtype_vehicule">Véhicule : </label>
	<select id="idtype_vehicule" name="type_vehicule" style="width :132px" onchange="affiche_vehicule_couleur();">
	<option value="voiture">voiture</option>
	<option value="camion">camion</option>
	</select>
</p>
<p>
	<label for="idcouleur_vehicule">Couleur : </label>
	<select id="idcouleur_vehicule" name="couleur_vehicule" style="width :132px" onchange="affiche_vehicule_couleur();">
	<option value="sans_couleur">sans</option>
	<option value="rouge">rouge</option>
	<option value="jaune">jaune</option>
	<option value="bleu">bleu</option>
	<option value="vert">vert</option>
	</select>
</p>
</form>
 
<div id="idaffichage"></div>
</body>

En JavaScript :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
function affiche_vehicule_couleur()
{
	var type_vehicule = document.getElementById('idtype_vehicule').value;
	var couleur_vehicule = document.getElementById('idcouleur_vehicule').value;
	if(couleur_vehicule=='') { couleur_vehicule = 'sans_couleur'; } // par defaut
	var img_html = '<img src="./images/'+type_vehicule+'_'+couleur_vehicule+'.png" alt="" />';
	document.getElementById('idaffichage').innerHTML = img_html;
};
</script>

Ou en jQuery :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
<!-- Script initialisation jquery -->
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
function affiche_vehicule_couleur()
{
	var type_vehicule = $('#idtype_vehicule').val();
	var couleur_vehicule = $('#idcouleur_vehicule').val();
	if(couleur_vehicule=='') { couleur_vehicule = 'sans_couleur'; } // par defaut
	var img_html = '<img src="./images/'+type_vehicule+'_'+couleur_vehicule+'.png" alt="" />';
	$('#idaffichage').html(img_html);
};
</script>

Important :
r�fl�chit bien � la mani�re de nommer les images en fonction des types de v�hicules et des couleurs.
Dans le cas d'un grand nombre de v�hicules diff�rents, d'un grand nombre de r�f�rences couleurs, il est possible de nommer les images en fonctions de ces r�f�rences.
Surtout si les v�hicules et couleurs sont enregistr�s en bas de donn�es (par exemple).
Les images pourraient alors se nommer [id_vehicule]-[id_couleur].png :
1238-54.png
653-83.png
...
Remarque : [id_vehicule] et [id_couleur] �tant des champs auto-incr�ment�s, chaque nom d'image est unique.

**Benjea** · 30/10/2012, 19h48

G��.....nial!

Ca fait plaisir.

J'aurais aim� toutefois une am�lioration.
Il y a en effet un aspect que je n'ai pas abord� et que je pensais sans rapport.

Ce que tu as propos� comme solution permet de passer 2 parametres pour definir l'image.

Il se trouve que j'ai d'autres select qui ne doivent passer qu'un param�tre par image et dans ce cas mon script initiale fonctionne tr�s bien.

Mon objectif est le suivant:
Je met mon select "unique" pour une image1 et ton select "double" pour une image2. Les deux doivent se suivre et �tre coll�s
Mais voil� en faisant ceci, J'ai un retour de ligne d� au div...:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
 
<img src="" alt="" id='remorque'  /><div id="idaffichage"></div>

j'ai essay�:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
 
<img src="" alt="" id='remorque'  /><img src="" alt="" id='idaffichage'  />

Ca ne fonctionne pas...

J'ai �galement tach� (sur la base de tes d�clarations de variables) d'en rajouter une "remorque" et de mettre 2 img scr dans "var img_html", m�me �chec...

Javascript ou php?

JavaScript

Vue hybride

Discussions similaires

Partager

Partager