3 questions renvoient une image

**leloup84** · 31/05/2016, 15h16

Bonjour,
Je souhaite cr�er un petit programme qui permettent � partir de 3 questions obtenir une image.
Un genre de petit configurateur d'ambiance. On choisi une couleur, une taille et un type et cela affiche la bonne photo.
J'ai vu que la base pouvait se g�rer en html/java.

Pour l'heure j'ai r�ussi avec le code ci-dessous et deux listes d�roulantes � afficher la bonne photo, mais dans une nouvelle fen�tre.
Hors sur la page d'accueil o� j'ai mes listes d�roulantes en bas de code j'ai une image par d�faut.
Ma demande est que c'est cette photo qui change au moment du clic sur le bouton "Afficher" et non que cela s'affiche dans une nouvelle fen�tre.
Dans l'a photo nomm� "Fond �cran"

Comment faire ?

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<html>
<body>
 
<form action="">
<p align="center"><font size="2" face="Calibri (Corps)">Rideau :</font>
  <select id="rideau" >
     <option value="rideau1">rideau1</option>
     <option value="rideau2">rideau2</option>
     <option value="rideau3">rideau3</option>
     <option value="rideau4">rideau4</option>
  </select></p>
 
<p align="center"><font size="2" face="Calibri (Corps)">Porte haute :</font> 
  <select id="porte">
     <option value="porte1">porte1</option>
     <option value="porte2">porte2</option>
     <option value="porte3">porte3</option>
     <option value="porte4">porte4</option>
  </select></p>
 
 
<p align="center"><input type="button" onclick="javascript:showImage();" value="Afficher"></p>
</form>
 
 
<p align="center"><img src="fond_ecran_accueil.jpg" style="width: 750px;" alt="Fond écran"></p>
 
 
<script>
function showImage() {
 
    // on récupère la valeur sélectionnée    
    var rideauField = document.getElementById("rideau");
    var rideauChoisie = rideauField.options[rideauField.selectedIndex].value;
 
    var porteField = document.getElementById("porte");
    var porteChoisie = porteField.options[porteField.selectedIndex].value;
 
    // on créé le nom du fichier par concaténation
    var file = rideauChoisie+"_"+porteChoisie+".jpg";
 
    // on ouvre le fichier correspondant dans la même fenêtre
    window.open(file,"_self");
}
</script>
 
 
</body>
</html>

Invit� · 31/05/2016, 17h06

Bonjour,

1/ attention � ne pas confondre Java et JavaScript.

2/ Si on identifie "l'image en bas" :

Code :

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

<p align="center"><img id="showMyImage" src="fond_ecran_accueil.jpg" style="width: 750px;" alt="Fond écran"></p>

Il suffit de remplacer :

Code :

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

window.open(file,"_self");

par :

Code :

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

document.getElementById('showMyImage').src=file;

**leloup84** · 31/05/2016, 17h08

Oui mais justement on m'a dit que pour mon besoin compl�mentaires cela se g�rait avec javascript, d'o� l'ouverture de cette discussion

**SpaceFrog** · 31/05/2016, 17h08

il suffirait pas de modifier le src d'un balise image sur la page ?

**joel.drigo** · 31/05/2016, 17h13

Envoy� par leloup84

Oui mais justement on m'a dit que pour mon besoin compl�mentaires cela se g�rait avec javascript, d'o� l'ouverture de cette discussion

Oui, parce que, que tu as pos� une question dans le forum Java, tout en parlant de html, Java et XML (), et que tu es parti sur la solution HTML/JavaScript... ce forum est donc plus appropri�.

Pour ceux que �a int�resse : la discussion d'origine.