select avec image à afficher

**hihi30** · 16/07/2009, 15h24

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 :

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
 
<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

**kohsaka** · 16/07/2009, 16h05

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.

**hihi30** · 16/07/2009, 16h09

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

**kohsaka** · 16/07/2009, 17h38

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

exemple :

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
 
<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>

**hihi30** · 16/07/2009, 17h56

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

select avec image à afficher

JavaScript

Discussions similaires

Partager

Partager