faire apparaitre une image au chargement d'un input

Version imprimable

bonjour,
je voudrais faire apparaitre une image de prévisualisation après avoir été chercher mon image dans un explorateur ;
je m'explique :
ce que je sais faire et que j'ai déjà :
un input texte, un bouton submit : je parcoure dans une popup mes images et , quand je valide, mon input texte a récupéré sa valeur ;
a partir de ce moment là, je voudrais avoir l'affichage de ce lien pour une preview
Code:

1 2 3 4 5 6 7 Image principale :   <input type="text" id="image1" name="image1" size="50" value="/images/mon_image.jpg" /> <input type="button" value="Choisir une image" onClick="monChoix=this.form.elements['image1'];window.open('explorateur.php?','popupchoix','width=800,height=600,menubar=no,status=no,scrollbars=yes,top=100,left=300')" /> <input type="button" value="Effacer" onclick="this.form.elements['image1'].value='';" />
... et je pensai pouvoir faire quelque chose comme ça :
Code:

1 2 <img src="" onmouseout="this.form.elements['image1'].src=this.form.getElementById['image1'].value";" />
mais ça ne fonctionne pas ...
quelqu'un aurait-il une idée , siouplait !! ??
merki d'avance !

10/12/2011, 15h55
NoSmoking

Bonjour,
une fois le lien sur l'image récupéré, donc inscrit dans un INPUT, il te suffit de mettre à jour l'image dans le window.opener, il lui faudra donc une ID pour être accessible.
11/12/2011, 12h54
zugolin

euh.... pas compris, moi ...
je cherche encore, alors...

alors voila où j'en suis ... mais je patauge ...

Code:

1
2
3
4
5
6
7
8
 
<script type="text/javascript"> var monChoix = null; var monChoix2 = null; </script>
Image principale : <br /><input type="text" id="image1" name="image1" 
		size="50" value="/images/mon_image.jpg" /> 
<input type="button" value="Choisir une image" 
		onClick="monChoix=this.form.elements['image1'];monChoix2=getElementById['imgsrc'];window.open('inc2/explorateur.php?ins=1','popupchoix','width=800,height=600,menubar=no,status=no,scrollbars=yes,top=100,left=300')" />
<input type="button" value="Effacer" onclick="this.form.elements['image1'].value='';" />
<img width="100" src="/images/images_fck/_blank.jpg" id="imgsrc" />

et dans la page explorateur :

Code:

1
2
3
4
5
6
7
function OpenFile(value) 
{
  window.opener.monChoix.value=value;
 window.opener.monChoix2.getAttribute("src")=value;//j'essai de recuperer la meme valeur
	window.top.close() ;
	window.top.opener.focus() ;	
}

mais ça ne fonctionne toujours pas

alors, j'ai pensé a faire une autre méthode
c'est peut etre ce que tu disait "nosmoking" ... ?
c'est a dire actualiser le src de l'image par rapport a la value

Code:

1
2
3
4
 
 
<img width="100" src="/images/images_fck/_blank.jpg" id="imgsrc" 
onmousemove="document.getElementById('imgsrc').src=this.form.elements[image1].value;"/>

resultat : "Erreur*: this.form is undefined"

... je me rapproche ou je m'éloigne de la solution ?

YES !, je l'ai eu, enfin !! :ccool: :mrgreen:

bon, alors voila le topo; finalement, j'appellerai plutôt ça :
"charger une image depuis un explorateur "
pour résumer, coté window.opener :

Code:

1
2
3
4
5
6
7
8
 
Image principale : <br> 
<img src="/images/une_image.jpg" id="imgsrcimage1" name="imgsrc" style="display: inline;" width="100"><br>
<input id="image1" name="image1" size="50" value="/images/une_image.jpg" type="text"> 
<input value="Choisir une image" onclick="monChoix=document.getElementById('image1');monChoix2=document.getElementById('imgsrcimage1');window.open('explorateur.php')" type="button">
<input value="Effacer" onclick="getElementById('image1').value='';getElementById('imgsrcimage1').src='';getElementById('imgsrcimage1').style.display='none';" type="button">
 
<br><br>

et coté explorateur.php :

Code:

1
2
3
4
5
6
7
8
9
 
function OpenFile(value) 
{
  window.opener.monChoix.value=value;
 window.opener.monChoix2.src=value;
 window.opener.monChoix2.style.display='inline';
	window.top.close() ;
	window.top.opener.focus() ;	
}

et pour le bouton inserer de l'exporateur:

Code:

1
2
3
4
 
<a href="#" onclick="OpenFile('/images/autre_image.jpg');return false;" >
<input type="hidden" name="nameinput" value="autre_image.jpg" />
<b>Insérer</b></a>

faudra juste que je change mon input text par du texte brut(ça ne sert plus a rien)
et voilou !!
résolvaté!