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 :

Comment faire d'une image, un bouton input file?


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Homme Profil pro
    Étudiant
    Inscrit en
    Janvier 2017
    Messages
    62
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 31
    Localisation : Cameroun

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Janvier 2017
    Messages : 62
    Par défaut Comment faire d'une image, un bouton input file?
    Bonjour,
    J'espère poster au bon endroit.
    Volia, j'aimerais remplacer le bouton input file (pas très esthétique) par une image (problème vieux comme le web...). Un peu comme le sélecteur d'images du site leboncoin. Si quelqu'un a une idée de la manière de procéder, qu'il n'hésite surtout pas.

    Merci.

  2. #2
    Membre Expert
    Avatar de badaze
    Homme Profil pro
    Chef de projets info
    Inscrit en
    Septembre 2002
    Messages
    1 412
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Ain (Rhône Alpes)

    Informations professionnelles :
    Activité : Chef de projets info
    Secteur : Transports

    Informations forums :
    Inscription : Septembre 2002
    Messages : 1 412
    Par défaut
    Il y a peut-être d'autres solutions, mais en voilà une.

    L'image c'est le carré rouge.

    Code html : 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
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Untitled</title>
    <script language="JavaScript" type="text/javascript">
    <!--
    function charge() {
      //document.getElementById('toto').value = ""; si tu veux initialiser à chaque fois
      document.getElementById('toto').click();
     document.getElementById('titi').value = document.getElementById('toto').value;
    }
    //-->
    </script>
    </head>
    <body>
    <input type="file" name='toto' id='toto' style="display:none"/>
    <input type="text" name='titi' id='titi' size="50"  /><img src="redwood.jpg" alt="" onclick="charge()">
    </body>
    </html>

    Nom : 20170224-002.jpg
Affichages : 1013
Taille : 111,7 Ko

  3. #3
    Membre averti
    Homme Profil pro
    Étudiant
    Inscrit en
    Janvier 2017
    Messages
    62
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 31
    Localisation : Cameroun

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Janvier 2017
    Messages : 62
    Par défaut
    Bonjour badaze.
    Je viens de voir votre message. Merci pour votre contribution, je regarde tous ça et je reviens.

  4. #4
    Membre averti
    Homme Profil pro
    Étudiant
    Inscrit en
    Janvier 2017
    Messages
    62
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 31
    Localisation : Cameroun

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Janvier 2017
    Messages : 62
    Par défaut
    Merci badaze ,je viens de tester et ça marche super!!!
    Thank youuuuuu!!!!

  5. #5
    Membre averti
    Homme Profil pro
    Étudiant
    Inscrit en
    Janvier 2017
    Messages
    62
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 31
    Localisation : Cameroun

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Janvier 2017
    Messages : 62
    Par défaut
    Help!!!!!!!Je me suis réjouis trop vite :_(
    Une fois n'est pas coutume, ça marche impecc sur IE. Malheureusement, su Firefox, il faut cliquer une deuxième fois sur le carré rouge (après la validation de l'image) pour que le champs texte prenne la valeur du nom de l' image.
    J'aurais encore besoin de votre aide badaze.

  6. #6
    Membre Expert
    Avatar de badaze
    Homme Profil pro
    Chef de projets info
    Inscrit en
    Septembre 2002
    Messages
    1 412
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Ain (Rhône Alpes)

    Informations professionnelles :
    Activité : Chef de projets info
    Secteur : Transports

    Informations forums :
    Inscription : Septembre 2002
    Messages : 1 412
    Par défaut
    Code html : 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
    <!DOCTYPE HTML>
    <html>
    <head>
    <title>Untitled</title>
    <script language="JavaScript" type="text/javascript">
    <!--
    function charge() {
      document.getElementById('toto').click();
    }
    function tutu() {
     i =  document.getElementById('toto');
     i.addEventListener('change',changeValeur,false);
    }
    function changeValeur() {
     document.getElementById('titi').value = this.value;
    }
    //-->
    </script>
    </head>
    <body onload="tutu()">
    <input type="file" name='toto' id='toto' style="display:none" />
    <input type="text" name='titi' id='titi' size="50"  /><img src="redwood.jpg" alt="" onclick="charge()">
    </body>
    </html>

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

Discussions similaires

  1. 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
  2. [VB.NET]Comment faire Pivoter une image
    Par vijeo dans le forum Windows Forms
    Réponses: 1
    Dernier message: 21/09/2006, 08h38
  3. [VB6 ] Comment faire pivoter une IMAGE
    Par Lucas42 dans le forum VB 6 et antérieur
    Réponses: 23
    Dernier message: 09/05/2006, 17h06
  4. [VB6] COmment Faire Clignoter une image ?
    Par Lucas42 dans le forum VB 6 et antérieur
    Réponses: 7
    Dernier message: 25/04/2006, 11h29
  5. Comment faire défiler une image dans un DBImage
    Par kolac dans le forum Bases de données
    Réponses: 1
    Dernier message: 08/04/2006, 13h45

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