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 :

créer un bouton pour afficher une image


Sujet :

JavaScript

  1. #1
    Membre à l'essai
    Profil pro
    Inscrit en
    avril 2008
    Messages
    29
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : avril 2008
    Messages : 29
    Points : 13
    Points
    13
    Par défaut créer un bouton pour afficher une image
    bonjour
    je suis debutant et je voudrai savoir comment creer un bouton qui en clickant affiche une image, image par image , en fait deux boutons, un pour afficher l'image suivante et l'autre pour afficher l'image précédente.

    merci

  2. #2
    Membre émérite Avatar de franculo_caoulene
    Profil pro
    Inscrit en
    octobre 2003
    Messages
    2 880
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : octobre 2003
    Messages : 2 880
    Points : 2 953
    Points
    2 953
    Par défaut
    Salut,

    Il faudrait qu'on déplace ton message vers le forum Javascript, car c'est ce qui doit être utiliser pour ça.
    Les Cours et tutoriels JavaScript
    Penser à la recherche et au bouton

  3. #3
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    mars 2002
    Messages
    38 466
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 70
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 38 466
    Points : 65 981
    Points
    65 981
    Billets dans le blog
    1
    Par défaut
    un recherche avec un mot magique :

    diaporama
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  4. #4
    Membre à l'essai
    Profil pro
    Inscrit en
    avril 2008
    Messages
    29
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : avril 2008
    Messages : 29
    Points : 13
    Points
    13
    Par défaut
    j'ai reussi a faire un diaporama. mais je voudrai defiler les images avec deux boutons, un pour suivant et l'autre pour précedent.
    merci

    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
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
     
     
    <html>
    <HEAD>
     
    <script>
     
    var slideShowSpeed = 10000
     
    var crossFadeDuration = 3
     
    var Pic = new Array()
     
    Pic[0] = 1.bmp'
     
    Pic[1] = 2.bmp'
     
    Pic[2] = 3.bmp'
     
    Pic[3] = '4.bmp'
     
     
     
    var t
     
    var j = 0
     
    var p = Pic.length
     
    var preLoad = new Array()
     
    for (i = 0; i < p; i++){
     
       preLoad[i] = new Image()
     
       preLoad[i].src = Pic[i]
     
    }
     
    function runSlideShow(){
     
       if (document.all){
     
          document.images.SlideShow.style.filter="blendTrans(duration=2)"
     
          document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"
     
          document.images.SlideShow.filters.blendTrans.Apply()      
     
       }
     
       document.images.SlideShow.src = preLoad[j].src
     
       if (document.all){
     
          document.images.SlideShow.filters.blendTrans.Play()
     
       }
     
       j = j + 1
     
       if (j > (p-1)) j=0
     
       t = setTimeout('runSlideShow()', slideShowSpeed)
     
    }
     
    </script>
     
    </HEAD>
     
    <BODY onLoad="runSlideShow()">
    <br><br><br><br><br><br><br><br><br><br>
    <p align="center"><table border="1" cellpadding="0" cellspacing="0"></p>
     
    <tr>
     
    <td id="VU" height=150 width=150>
     
    <p align="center"><img src="STREAM_IHM15.bmp" name='SlideShow' ></td></p>
     
     
    </tr>
     
    </table>
     
    </BODY>
    </html>

  5. #5
    Expert éminent sénior
    Avatar de Auteur
    Profil pro
    Inscrit en
    avril 2004
    Messages
    7 252
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : avril 2004
    Messages : 7 252
    Points : 10 202
    Points
    10 202
    Par défaut
    http://www.developpez.net/forums/sho...d.php?t=543119
    Code intitulé "simple diaporama" (n°4)

  6. #6
    Membre à l'essai
    Profil pro
    Inscrit en
    avril 2008
    Messages
    29
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : avril 2008
    Messages : 29
    Points : 13
    Points
    13
    Par défaut
    bonjour
    je viens de creer une diapo avec le liens : http://www.developpez.net/forums/sho....php?t=543119:

    je voudrai afficher pour chaque image affichée un texte correspendant!!!
    donc j'ai rajouté un tableTxt.et j'ai rajouté aussi document.createElement(tabTxt[i]), mais ça ne marche pas.!!!!!

    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
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
     
    var chemin = "images/"; // dossier contenant les images
    var tabImg = new Array("i1.gif", "i2.gif", "i3.gif", "i4.gif", "i5.gif");
    var tabTxt = new Array("image claire", "image troble", "image  bruité", "image...", "image...");
    var i;
     
     
    function defileImage(arg)
    {
      if (!isNaN(arg) && arg!=null)
      {
        i = arg;
      }
     
      if (arg==null)
        i = 0;
      else
      {  
        switch (arg.id)
        { 
          case "btn1":    // id du bouton "première image"
              i = 0;
              break;
          case "btn2":    // id du bouton "image précédente"
              i--;
              break;
          case "btn3":    // id du bouton "image suivante"
              i++;
              break;
          case "btn4":    // id du bouton "dernière image"
              i = tabImg.length-1;
              break;
          /*default:
              i=0;*/
        }  
      }
     
      document.getElementById("btn1").disabled = (i==0);
      document.getElementById("btn2").disabled = (i==0);    
     
      document.getElementById("btn3").disabled = (i==tabImg.length-1);
      document.getElementById("btn4").disabled = (i==tabImg.length-1); 
     
      document.getElementById("idImage").src = chemin + tabImg[i];
    document.createElement(tabtxt[i]);
    }
     
    function afficheVignettes()
    {
      var j, objImg;
      var c;
     
      c = document.getElementById("Cvignettes");
     
      for (j=0; j<tabImg.length; j++)
      {
        objImg = document.createElement("img");
        objImg.src = chemin + tabImg[j];
        objImg.className="vignettes";
     
        objImg.n = j;
        objImg.onclick = function(){defileImage(this.n)}
     
        c.appendChild(objImg); 
      }
    }

  7. #7
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    mars 2002
    Messages
    38 466
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 70
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 38 466
    Points : 65 981
    Points
    65 981
    Billets dans le blog
    1
    Par défaut
    createElement c'est pour créer des balises ...
    div span ....
    certainement pas une balise <image bruitée>

    à la limite
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    document.createTextNod(Tabtx[i]) ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  8. #8
    Expert éminent sénior
    Avatar de Auteur
    Profil pro
    Inscrit en
    avril 2004
    Messages
    7 252
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : avril 2004
    Messages : 7 252
    Points : 10 202
    Points
    10 202
    Par défaut
    Dans la partie HTML j'ai ajouté un div (id="titreImg") et j'applique la classe .texte.

    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
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
    <head>
     
    <title></title>
     
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="Content-Language" content="fr" />
    <meta name="Author" content="Auteur - www.developpez.com" />
     
    <style type="text/css">
    <!--
    .conteneur{
      text-align: center;
      width: 300px;
    }
     
    .bouton{
      text-align: center;
      width: 50px;
      height: 30px;
    }
     
    .image{
      width: 80px;
    }
     
    .texte{
      text-align: center;
      width: 100%; 
      border: none;
      font-size: 14pt;
      font-family: "Times New Roman";
    }
     
    .listeVignettes{
      border: ridge #AAAAAA 5px;
      overflow: auto;
      width: 300px; 
      height: 100px;
      background-color: #000000;
      padding: 0px;
    }
     
    .vignettes{
      width: 40px;
      margin: 4px;
      background-color: #FFFFFF;
      border: ridge #FFFFFF 2px;
      cursor: pointer;  
    }
    -->
    </style>
     
    <script type="text/javascript" src="DiaporamaSimple.js"></script> 
     
    <script type="text/javascript">
    <!--
     
    //-->
    </script>
     
    </head>
     
    <body onload="afficheVignettes(); defileImage(null)">
     
    <div class="conteneur">
      <img src="" id="idImage" class="image" alt="image" /><br />
     
      <div class="texte" id="titreImg">
      </div>
     
      <input class="bouton" id="btn1" type="button" value=" |&lt; " onclick="defileImage(this)" />
      <input class="bouton" id="btn2" type="button" value=" &lt; " onclick="defileImage(this)" />
      <input class="bouton" id="btn3" type="button" value=" &gt; " onclick="defileImage(this)" />
      <input class="bouton" id="btn4" type="button" value=" &gt;| " onclick="defileImage(this)"/>
    </div>
     
    <div>
      <br/><br/><br/>
    </div>
     
    <div id="Cvignettes" class="listeVignettes">
    </div>
     
    </body>
     
    </html>

    Code javascript :
    Code javascript : 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
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
     
    var chemin = "images/"; // dossier contenant les images
    var tabImg = new Array("i1.gif", "i2.gif", "i3.gif", "i4.gif", "i5.gif","i1.gif", "i2.gif", "i3.gif", "i4.gif", "i5.gif");
    var tabTxt = new Array("image claire", "image troble", "image  bruité", "image...", "image...");
    var i;
     
     
    function defileImage(arg)
    {
      if (!isNaN(arg) && arg!=null)
      {
        i = arg;
      }
     
      if (arg==null)
        i = 0;
      else
      {  
        switch (arg.id)
        { 
          case "btn1":    // id du bouton "première image"
              i = 0;
              break;
          case "btn2":    // id du bouton "image précédente"
              i--;
              break;
          case "btn3":    // id du bouton "image suivante"
              i++;
              break;
          case "btn4":    // id du bouton "dernière image"
              i = tabImg.length-1;
              break;
          /*default:
              i=0;*/
        }  
      }
     
      document.getElementById("btn1").disabled = (i==0);
      document.getElementById("btn2").disabled = (i==0);    
     
      document.getElementById("btn3").disabled = (i==tabImg.length-1);
      document.getElementById("btn4").disabled = (i==tabImg.length-1); 
     
      document.getElementById("idImage").src = chemin + tabImg[i];
     
      document.getElementById("titreImg").innerHTML = (tabTxt[i]?tabTxt[i]:"");
    }
     
    function afficheVignettes()
    {
      var j, objImg, nobr;
      var c;
     
      c = document.getElementById("Cvignettes");
      nobr = document.createElement("nobr");
     
      for (j=0; j<tabImg.length; j++)
      {  
        objImg = document.createElement("img");
        objImg.src = chemin + tabImg[j];
        objImg.className="vignettes";
     
        objImg.n = j;
        objImg.onclick = function(){defileImage(this.n)}
     
        nobr.appendChild(objImg); 
      }
      c.appendChild(nobr); 
    }

    j'ai simplement ajouté cette ligne :
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
      document.getElementById("titreImg").innerHTML = (tabTxt[i]?tabTxt[i]:"");
    Je remplis le div idTitre avec le contenu de tabTxt. Je teste [I]tabTxt : s'il existe j'ajoute le titre sinon je ne mets rien.

    éventuellement tu peux remplacer
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    (tabTxt[i]?tabTxt[i]:"")
    par
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    (tabTxt[i]?tabTxt[i]:"&nbsp;")

    [edit]
    petite faute de frappe Spacefrog >> c'est :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    document.createTextNode(Tabtx[i]) ...

    [/edit]

  9. #9
    Membre à l'essai
    Profil pro
    Inscrit en
    avril 2008
    Messages
    29
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : avril 2008
    Messages : 29
    Points : 13
    Points
    13
    Par défaut
    oui j'ai rajouter "document.createTextNod(Tabtx[i]) " mais ça ne marche pas.
    faut-il rajouter un code ou balise dans le code html??

  10. #10
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    mars 2002
    Messages
    38 466
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 70
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 38 466
    Points : 65 981
    Points
    65 981
    Billets dans le blog
    1
    Par défaut
    regarde plutot la reponse d'Ebzz
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  11. #11
    Expert éminent sénior
    Avatar de Auteur
    Profil pro
    Inscrit en
    avril 2004
    Messages
    7 252
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : avril 2004
    Messages : 7 252
    Points : 10 202
    Points
    10 202
    Par défaut
    Citation Envoyé par SpaceFrog Voir le message
    regarde plutot la reponse d'Ebzz

    il n'est pas intervenu dans la discussion...

  12. #12
    Membre à l'essai
    Profil pro
    Inscrit en
    avril 2008
    Messages
    29
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : avril 2008
    Messages : 29
    Points : 13
    Points
    13
    Par défaut
    oh kel bonheur merci vous etes vraiments simpa, meri...

  13. #13
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    mars 2002
    Messages
    38 466
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 70
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 38 466
    Points : 65 981
    Points
    65 981
    Billets dans le blog
    1
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    Mouarf :red:
    vous vous ressemblez tellement
    ....
    toutes mes confuses BDP
    
    
    Je parlais d'Auteur bien entendu ...
    
    
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

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

Discussions similaires

  1. Problème pour afficher une image bmp
    Par homeostasie dans le forum MFC
    Réponses: 6
    Dernier message: 08/05/2005, 19h36
  2. [MFC]Problème pour afficher une image.
    Par Deedier dans le forum MFC
    Réponses: 4
    Dernier message: 25/03/2005, 17h13
  3. Réponses: 13
    Dernier message: 23/12/2004, 19h01
  4. Réponses: 7
    Dernier message: 21/10/2004, 10h13
  5. Comment faire pour afficher une image ds une dbgrid
    Par totomaze dans le forum Bases de données
    Réponses: 2
    Dernier message: 16/10/2004, 16h31

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