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.