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
    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
    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

    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
    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
    http://www.developpez.net/forums/sho...d.php?t=543119
    Code intitulé "simple diaporama" (n°4)

  6. #6
    Membre à l'essai
    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

    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
    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
    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

    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
    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
    oh kel bonheur merci vous etes vraiments simpa, meri...

  13. #13
    Rédacteur/Modérateur

    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

###raw>template_hook.ano_emploi###