Listbox afficher une image

**jojo86** · 06/07/2011, 12h54

Bonjour,
J'ai un formulaire php qui parcours un repertoire photos du serveur et liste les noms des images dans une listbox.

Losrqu'on clic sur un nom de la listbox, je voudrais que l'image correspondant au nom apparaisse dans la page... Je ne trouve rien a se sujet...
Visiblement je dois chercher a faire sa en javascript...

En java j'arrive a faire apparaitre un message lorsqu'on clic sur un element de la liste, mais je n'arrive pas a afficher l'image...

Merci de votre aide!

**Benjamin Delespierre** · 06/07/2011, 13h23

Hello

Cette question est relative au forum JavaScript.

Voici une solution simple avec jQuery:

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
 
<select id="images">
  <option value="images/01.jpg">01.jpg</option>
  <option value="images/02.jpg">02.jpg</option>
  <option value="images/03.jpg">03.jpg</option>
</select>
<div id="img_placeholder"></div>
<script type="text/javascript">
<!--
$(function () {
  $('#images').change(function () {
    $('#img_placeholder').html($('<img>').attr('src', $(this).val()));
  });
});
//-->
</script>

Enjoy.

**jojo86** · 06/07/2011, 19h40

Merci, mais l'image n'apparaît pas dans ma page...

**Benjamin Delespierre** · 06/07/2011, 21h32

Peux-tu être un peu plus explicite ?

**jojo86** · 06/07/2011, 21h42

Tu as essayé toi le script? (peut être une fausse manip de ma part mais j'ai vérifié plusieurs fois...)
La liste apparait, mais pas d'image à l'écran lorsque je selectionne un item...

Regarde : http://georges86.free.fr/test/Ajoute...TestImage.html

**ska_root** · 06/07/2011, 22h05

Bonjour,

Envoyé par Benjamin Delespierre

Voici une solution simple avec jQuery:

Pour exécuter ce script, il faut télécharger et inclure la librairie javascript JQuery dans ton html. Sinon, il existe aussi des tutos...

JQuery :
http://docs.jquery.com/Downloading_j...ownload_jQuery

Tutos DVP :
http://javascript.developpez.com/cou...meworks#jquery

**jojo86** · 06/07/2011, 22h07

Ah d'accord !!!
Hé Hé ! effectivement... Sans installer le bazard !
Merci je vais regarder,
J'ai trouvé un code qui peut faire ça qu'en pensez-vous et quel est l'avantage de jQuery par rapport à ce code? :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
<form name="avatar">
  <select name="avatar" onchange="document.getElementById('monimageavecid').src=this.value;"> 
      <option value="avatar1.jpg">Avatar1</option>
      <option value="avatar2.jpg">Avatar2</option>
      <option value="avatar3.jpg">Avatar3</option>
      <option value="avatar4.jpg">Avatar4</option>
      <option value="avatar5.jpg">Avatar5</option>
      <option value="avatar6.jpg">Avatar6</option>  
   </select>
   <img scr="javascript:type_avatar(this.value);">
</form>

Merci !

**jojo86** · 06/07/2011, 22h21

Merci ! j'ai réussi !
Il est possible de redimensionner l'image automatiquement pour que toutes les images s'affiche dans le même cadre?

Encore merci !

**ska_root** · 06/07/2011, 22h46

en fait, les librairies javascript permettent beaucoup de chose intéressantes si tu veux utiliser beaucoup Javascript ou Ajax (fallait bien parler de PHP un moment donné...)

mais pour ton exemple, tu pouvais faire plus simple aussi, sans aucune librairie.

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
 
<html>	
<head>
		<title>test</title>
		<script type="text/javascript">
		<!--
 
		// fix pour compatibilite IE / Firefox 
		if(!document.getElementById) document.getElementById=function (id) {
 			return eval("document.all."+id);
 		}
 
 
		function view_image(el) {
			var img_placeholder= document.getElementById('img_placeholder');
			img_placeholder.src=(el.options[el.options.selectedIndex].value);
		}
 
		//-->
		</script>
</head>
<body>
 
<select id="images" onChange="view_image(this)">
<option value="images/01.jpg">01.jpg</option>
<option value="images/02.jpg">02.jpg</option>
<option value="images/03.jpg">03.jpg</option>	
</select>
 
<img id="img_placeholder" src="images/01.jpg" />
</body>
 
</html>

edit: désolé, je n'avais pas vu ton post précédent qui est sensiblement la même chose (sauf que cela ne marche pas sur IE7 et inférieur

)

pour le redimensionnement, tu peux forcer la balise image (mais le poids de l'image reste le même et c'est pas génial si l'image est de type portrait par exemple, a moins qu'elles le soient toutes évidemment...)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<img id="img_placeholder" src="images/01.jpg" width="150"/>

Listbox afficher une image

Langage PHP

Vue hybride

Discussions similaires

Partager

Partager