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 éclairé Avatar de zugolin
    Homme Profil pro
    Inscrit en
    Octobre 2007
    Messages
    275
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Gironde (Aquitaine)

    Informations forums :
    Inscription : Octobre 2007
    Messages : 275
    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 202
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 202
    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 éclairé Avatar de zugolin
    Homme Profil pro
    Inscrit en
    Octobre 2007
    Messages
    275
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Gironde (Aquitaine)

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

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

    Informations forums :
    Inscription : Octobre 2007
    Messages : 275
    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 éclairé Avatar de zugolin
    Homme Profil pro
    Inscrit en
    Octobre 2007
    Messages
    275
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Gironde (Aquitaine)

    Informations forums :
    Inscription : Octobre 2007
    Messages : 275
    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