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

Discussions similaires

Partager

Partager