IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

faire apparaitre une image au chargement d'un input


Sujet :

JavaScript

  1. #1
    Membre habitué Avatar de zugolin
    Homme Profil pro
    Inscrit en
    Octobre 2007
    Messages
    267
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Gironde (Aquitaine)

    Informations forums :
    Inscription : Octobre 2007
    Messages : 267
    Points : 164
    Points
    164
    Par défaut faire apparaitre une image au chargement d'un input
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 !

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 110
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 110
    Points : 44 929
    Points
    44 929
    Par défaut
    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.

  3. #3
    Membre habitué Avatar de zugolin
    Homme Profil pro
    Inscrit en
    Octobre 2007
    Messages
    267
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Gironde (Aquitaine)

    Informations forums :
    Inscription : Octobre 2007
    Messages : 267
    Points : 164
    Points
    164
    Par défaut
    euh.... pas compris, moi ...
    je cherche encore, alors...

  4. #4
    Membre habitué Avatar de zugolin
    Homme Profil pro
    Inscrit en
    Octobre 2007
    Messages
    267
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Gironde (Aquitaine)

    Informations forums :
    Inscription : Octobre 2007
    Messages : 267
    Points : 164
    Points
    164
    Par défaut
    alors voila où j'en suis ... mais je patauge ...

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 ?

  5. #5
    Membre habitué Avatar de zugolin
    Homme Profil pro
    Inscrit en
    Octobre 2007
    Messages
    267
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Gironde (Aquitaine)

    Informations forums :
    Inscription : Octobre 2007
    Messages : 267
    Points : 164
    Points
    164
    Par défaut
    YES !, je l'ai eu, enfin !!

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

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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é!

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Faire apparaitre une image dans une fenetre.
    Par kilrou dans le forum GTK+ avec C & C++
    Réponses: 3
    Dernier message: 23/05/2008, 13h13
  2. Faire apparaitre une image a un endroit tiré au hasard
    Par hools dans le forum Général JavaScript
    Réponses: 7
    Dernier message: 28/02/2008, 14h55
  3. Faire apparaitre une image.
    Par darkdeeper dans le forum VB.NET
    Réponses: 2
    Dernier message: 17/10/2007, 09h17
  4. comment faire apparaitre une image puis une autre si quête réalisée ?
    Par oceanne dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 09/05/2007, 21h47
  5. [MouseEntered] pb de localisation souris pour faire apparaitre une image
    Par sebpsi dans le forum Interfaces Graphiques en Java
    Réponses: 12
    Dernier message: 23/06/2006, 11h03

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo