select avec image à afficher

Version imprimable

bonjour j'ai un petit probleme, j'ai une select qui va afficher les noms des images existant dans un dossier, ce que je veux c'est quand je met la souris sur une option du select( nom image) que ca m'affiche l'image qui correspond.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <select size="3" name="enteteImage" id="enteteImage"> <% String fichier = context.getRealPath("/images/" ); File repertoire = new File (fichier); String [] listefichiers=repertoire.list(); String optionSelect = ""; for(int c=0;c<listefichiers.length;c++) { if((! listefichiers[c].contentEquals(".svn")) && (! listefichiers[c].contentEquals("Thumbs.db"))) { File temp = new File (fichier + "/" + listefichiers[c]); optionSelect = optionSelect + "<option>" + listefichiers[c] + "</option>"; } } out.print(optionSelect); %> </select>
je sais pas comment fairre merci pour votre aide

16/07/2009, 16h05
kohsaka

pour faire ça tu aura plutôt besoin de javascript !

en gros pour faire ce que tu veux faire, il va falloir qu'au survole d'une de tes balises options, tu récupères l'url de l'image que tu veux afficher et que tu l'attribut à une balise img.
16/07/2009, 16h09
hihi30

c'est ca comment faire pour la balise image, est ce que ca sera un attribut de mon option ou bien je met un autre cadre ou j'affiche l'image
je sais pas si je suis clair

tu devras créer un cadre pour l'afficher, après tout dépend du rendu que tu veux obtenir.

exemple :

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
25
26
27
28
29
30
31
32
33
34
35
36
 
<style type="text/css">
#display-img {
  display: none;
  position: absolute;
  top: 15px;
  right: 15px;
}
</style>
...
<body>
<div id="display-img">
   <img src="balblalbla.jpg" alt="" />
</div>
...
<div class="site">
   <select>
       <option onmouseover="showImage()" onmouseout="hideImage()">opt 1</option>
       <option onmouseover="showImage()" onmouseout="hideImage()">opt 2</option>
   </select>
</div>
 
 
<script type="text/javascript">
   function showImage() {
      // ton code ...
 
      windows.document.getElementById('display-img').style.display = 'block';
   }
   function hideImage() {
      // ton code ...
 
      windows.document.getElementById('display-img').style.display = 'none';
   }
</script>
</body>

16/07/2009, 17h56
hihi30

merci beaucoup d'avoir pris le temps de me répondre,
ton truc ca marche c'est exactement ce qu'il me fallait
thanks t'es trop fort ;)