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 :

Ajouter le paramètre titre à un script de diapo qui marche nickel


Sujet :

JavaScript

  1. #1
    Membre éclairé Avatar de Alexandrebox
    Profil pro
    Inscrit en
    Août 2006
    Messages
    635
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : Août 2006
    Messages : 635
    Par défaut Ajouter le paramètre titre à un script de diapo qui marche nickel
    Bonjour les amis,

    Je suis débutant en Javascript. J'ai un code diaporama qui marche vraiment nickel. Les images sont dans un tableau
    randImgObj.set1 = new Array("photo1.jpg", "photo2.jpg");
    Je voudrais assigné à chaque image un titre et un lien sur le titre.
    Comme ça. l'image qui s'affiche à son titre en dessous et ce titre est un lien

    Comment déclarer ce tableau?
    Comment afficher l'image avec son titre/lien

    Je vous remercie d'avance pour votre aide

    Voici le code. (Il marche nickel. Ce n'est pas le problème)
    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
    89
     
    //LE CODE JAVASCRIPT QUI TRAITE L'IMAGE
    <SCRIPT language=JavaScript type=text/javascript>
     
    // image file names go in these arrays
    randImgObj.set1 = new Array("photo1.jpg", "photo2.jpg");
     
     
    // If all the images you wish to display are in the same location, you can specify the path here 
    randImgObj.imagesPath = "images/";
     
    // No need to edit code below this line 
    /////////////////////////////////////////////////////////////////////
    Array.prototype.shuffle = function() { 
      var i, temp, i1, i2;
      for (i=0; i<this.length; i++) { 
        i1 = Math.floor( Math.random() * this.length );
        i2 = Math.floor( Math.random() * this.length );
        temp = this[i1];
        this[i1] = this[i2];
        this[i2] = temp;
      }
    }
     
    randImgObjs = []; // holds all random rotating image objects defined
    // constructor 
    function randImgObj(s) {
      this.speed=s; this.ctr=0; this.timer=0;  
      this.index = randImgObjs.length; randImgObjs[this.index] = this;
      this.animString = "randImgObjs[" + this.index + "]";
    }
     
    randImgObj.prototype = {
      addImages: function(ar) { // preloads images
        this.imgObj.imgs = [];
        for (var i=0; ar[i]; i++) {
          this.imgObj.imgs[i] = new Image();
          this.imgObj.imgs[i].src = randImgObj.imagesPath + ar[i];
        }
      },
     
      rotate: function() { // controls rotation
        var ctr = Math.floor( Math.random() * this.imgObj.imgs.length );
        if (ctr == this.ctr) ctr = (ctr > 0)? --ctr: ++ctr;
        this.ctr = ctr;
        if ( typeof this.imgObj.filters != "undefined" ) {
       		this.imgObj.style.filter = 'blendTrans(duration=1)';
          if (this.imgObj.filters.blendTrans) this.imgObj.filters.blendTrans.Apply();
        }
        this.imgObj.src = this.imgObj.imgs[this.ctr].src;
        if ( typeof this.imgObj.filters != "undefined" && this.imgObj.filters.blendTrans )
          this.imgObj.filters.blendTrans.Play();    
      }
    }
     
    // sets up rotation for all defined randImgObjs
    randImgObj.start = function() {
      for (var i=0; i<randImgObjs.length; i++) 
        randImgObjs[i].timer = setInterval(randImgObjs[i].animString + ".rotate()", randImgObjs[i].speed);                     
    }
     
    randImgObj.setUpImg = function(imgAr, sp, w, h) {
      var rotator, img, imgStr = "";
      rotator = new randImgObj(sp);
      randImgObjs[randImgObjs.length-1].imgAr = imgAr;
      imgAr.shuffle();
      img = imgAr[ Math.floor( Math.random() * imgAr.length ) ]; 
      imgStr += '<img src="' + randImgObj.imagesPath + img + '" alt="" ';
      imgStr += 'name="img' + (randImgObjs.length-1) + '" width="' + w + '" height="' + h + '">';
      document.write(imgStr); 
    }
     
    function initRandRotation() {
      for (var i=0; randImgObjs[i]; i++) {
        var rotator = randImgObjs[i];
        rotator.imgObj = document.images["img" + i]; // get reference to the image object
        rotator.addImages(rotator.imgAr);
        rotator.rotate();
      }
      randImgObj.start();  
    }
     
    //-->
    </SCRIPT>
     
    <STYLE type=text/css>BODY {
    	MARGIN: 0px
    }
    </STYLE>
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
     
    //LE CODE HTML ET JAVASCRIPT QUI AFFICHE L'IMAGE
    <BODY onload=initRandRotation();>
    <table width="474" height="174" border="0">
      <!--DWLayoutTable-->
      <tr> 
        <td width="468"><SCRIPT type=text/javascript>
    //  images array, delay, width and height of images
    randImgObj.setUpImg(randImgObj.set1, 4600, 474, 174);
    </SCRIPT>&nbsp;</td>
      </tr>
    </table>
    </BODY>
    Merci d'avance pour aide

  2. #2
    Expert confirmé
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 660
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 660
    Par défaut
    bonjour,

    voià déjà un début :
    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
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
     
    <html>
    <head>
    <title></title>
     
    <script language=JavaScript type=text/javascript>
    <!--
    // image file names go in these arrays
    randImgObj.set1_Img = new Array("i1.gif", "i2.gif", "i3.gif", "i4.gif", "i5.gif");
     
    // Tableau de textes
    randImgObj.set1_Txt = new Array("Texte 1", "Texte 2", "Texte 3", "Texte 4", "Texte 5");
     
     
     
    // If all the images you wish to display are in the same location, you can specify the path here 
    randImgObj.imagesPath = "tests/images/";
     
    // No need to edit code below this line 
    /////////////////////////////////////////////////////////////////////
    Array.prototype.shuffle = function() 
    {
      var i, temp, i1, i2;
      for (i=0; i<this.length; i++) 
      {
        i1 = Math.floor( Math.random() * this.length );
        i2 = Math.floor( Math.random() * this.length );
        temp = this[i1];
        this[i1] = this[i2];
        this[i2] = temp;
      }
    }
     
    randImgObjs = []; // holds all random rotating image objects defined
    // constructor 
    function randImgObj(s) 
    {
      this.speed=s; 
      this.ctr=0; 
      this.timer=0;
     
      this.index = randImgObjs.length;
      randImgObjs[this.index] = this;
     
      this.animString = "randImgObjs[" + this.index + "]";
    }
     
    randImgObj.prototype = 
    {
      addImages: function(ar, txtArray) //ajout du parametre txtArray
      { // preloads images
        this.imgObj.imgs = [];
     
        // creation du tableau txts de l objet txtObj
        this.txtObj.txts = [];
     
        for (var i=0; ar[i]; i++)
        {
          this.imgObj.imgs[i] = new Image();
          this.imgObj.imgs[i].src = randImgObj.imagesPath + ar[i];
     
          // remplissage du tableau txts
          this.txtObj.txts[i] = txtArray[i];
        }
      },
     
      rotate: function()
      { // controls rotation
     
        var ctr = Math.floor( Math.random() * this.imgObj.imgs.length );
     
        if (ctr == this.ctr)
            ctr = (ctr > 0)? --ctr: ++ctr;
     
        this.ctr = ctr;
     
        if ( typeof this.imgObj.filters != "undefined" )
        {
       		this.imgObj.style.filter = 'blendTrans(duration=1)';
            if (this.imgObj.filters.blendTrans)
                this.imgObj.filters.blendTrans.Apply();
        }
     
        this.imgObj.src = this.imgObj.imgs[this.ctr].src;
     
        // modification du texte de l'objet txtObj
        this.txtObj.innerHTML = this.txtObj.txts[this.ctr];
     
        if ( typeof this.imgObj.filters != "undefined" && this.imgObj.filters.blendTrans )
            this.imgObj.filters.blendTrans.Play();
      }
    }
     
    // sets up rotation for all defined randImgObjs
    randImgObj.start = function() 
    {
      for (var i=0; i<randImgObjs.length; i++) 
        randImgObjs[i].timer = setInterval(randImgObjs[i].animString + ".rotate()", randImgObjs[i].speed);                     
    }
     
    randImgObj.setUpImg = function(imgAr, txtAr, sp, w, h)  // ajout du paramètre txtAr
    {
      var rotator, img, imgStr = "";
      var n, txt;                   //creation des variables n et txt
     
      rotator = new randImgObj(sp);
     
      randImgObjs[randImgObjs.length-1].imgAr = imgAr;
      randImgObjs[randImgObjs.length-1].txtAr = txtAr;  //ajout de txtAr dans l'objet randImgObjs
     
      //imgAr.shuffle();    //mise en commentaire...
     
      n = Math.floor( Math.random() * imgAr.length );   // tirage d'une valeur aléatoire
     
      img = imgAr[ n ];     // on prend l image n
      txt = txtAr[ n ];     // on prend le texte n de l image n
     
      // pas de modification de ce code
      imgStr += '<img src="' + randImgObj.imagesPath + img + '" alt="" ';
      imgStr += 'name="img' + (randImgObjs.length-1) + '" width="' + w + '" height="' + h + '">';
     
      // creation de la zone de texte
      imgStr += '<div id="txt' + (randImgObjs.length-1) + '" style="font-size: 20pt; text-align: center">';
      imgStr += txt;
      imgStr += '</div>';
     
      document.write(imgStr);
    }
     
    function initRandRotation() 
    {
      for (var i=0; randImgObjs[i]; i++) 
      {
        var rotator = randImgObjs[i];
        rotator.imgObj = document.images["img" + i]; // get reference to the image object
     
        rotator.txtObj = document.getElementById("txt" + i);    // on recupere la zone de texte des images
     
        rotator.addImages(rotator.imgAr, rotator.txtAr);        // ajout du parametre rotator.txtAr
     
        rotator.rotate();
      }
      randImgObj.start();  
    }
     
    //-->
     
    </script>
    </head>
     
    <body onload="initRandRotation()">
     
    <div style="background-color: #DDD; width: 500px; border: 4px ridge #DDD">
    <script type=text/javascript>
    //  images array_img, array_txt, delay, width and height of images
    randImgObj.setUpImg(randImgObj.set1_Img, randImgObj.set1_Txt, 4000, 474, 174);
    </script>
    </div>
     
    </body>
     
    </html>

    tu veux que le texte soit cliquable ? Peux-tu être plus précis sur ce point ?

  3. #3
    Membre éclairé Avatar de Alexandrebox
    Profil pro
    Inscrit en
    Août 2006
    Messages
    635
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : Août 2006
    Messages : 635
    Par défaut
    Merci déjà pour ta réponse.
    Oui ce titre est un lien. donc le texte sera cliquable

  4. #4
    Expert confirmé
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 660
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 660
    Par défaut
    texte est différent de l'url (et dans ce cas il faut créer un autre objet) ou le texte est l'url ?

  5. #5
    Membre éclairé Avatar de Alexandrebox
    Profil pro
    Inscrit en
    Août 2006
    Messages
    635
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : Août 2006
    Messages : 635
    Par défaut
    Merci beaucoup.
    Je m'explique : Le titre ou texte si tu veux doit être cliquable
    exemple :
    image1 = "";
    lien1 = "<a href=\"www/site/page_image1.php\">"
    titre = "ceci est image 1"

    affichage sous l'image affichée
    <a href=\"www/site/page_image1.php\">"ceci est image 1</a>

    J'aimerais savoir comment déclarrer pour chaque image ces deux choses. Et comment afficher?

    Merci d'avance pour ton aide

  6. #6
    Expert confirmé
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 660
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 660
    Par défaut
    j'ai modifié ton script :

    voilà le code dans un premier temps. J'ai repris ton code initial :
    Code X : 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
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    <html>
    <head>
    <title></title>
    
    <script type="text/javascript">
    <!--
    // image file names go in these arrays
    randImgObj.set1 = new Array( ["i1.gif", "i2.gif", "i3.gif", "i4.gif", "i5.gif"],
                                 ["Texte 1", "Texte 2", "Texte 3", "Texte 4", "Texte 5"],
                                 ["url_1", "url_2", "url_3", "url_4", "url_5"]
                                );
    
    
    
    // If all the images you wish to display are in the same location, you can specify the path here 
    randImgObj.imagesPath = "tests/images/";
    
    // No need to edit code below this line 
    /////////////////////////////////////////////////////////////////////
    Array.prototype.shuffle = function() 
    {
      var i, temp, i1, i2;
      for (i=0; i<this.length; i++) 
      {
        i1 = Math.floor( Math.random() * this.length );
        i2 = Math.floor( Math.random() * this.length );
        temp = this[i1];
        this[i1] = this[i2];
        this[i2] = temp;
      }
    }
     
    randImgObjs = []; // holds all random rotating image objects defined
    // constructor 
    function randImgObj(s) 
    {
      this.speed=s; 
      this.ctr=0; 
      this.timer=0;
    
      this.index = randImgObjs.length;
      randImgObjs[this.index] = this;
    
      this.animString = "randImgObjs[" + this.index + "]";
    }
     
    randImgObj.prototype = 
    {
      addImages: function(ar)
      { // preloads images
        this.imgObj.imgs = [];
    
        this.txtObj.txts = [];      //tableau des textes
        this.txtObj.liens = [];     //tableau des liens
    
    
        for (var i=0; ar[0][i]; i++)
        {
          this.imgObj.imgs[i] = new Image();
          this.imgObj.imgs[i].src = randImgObj.imagesPath + ar[0][i];   //0 : index des images
    
          // remplissage des tableaux txts et liens
          this.txtObj.txts[i] = ar[1][i];     // 1: index des textes
          this.txtObj.liens[i] = ar[2][i];    // 2: index des liens
    
        }
      },
    
      rotate: function()
      { // controls rotation
    
        var ctr = Math.floor( Math.random() * this.imgObj.imgs.length );
    
        if (ctr == this.ctr)
            ctr = (ctr > 0)? --ctr: ++ctr;
    
        this.ctr = ctr;
    
        if ( typeof this.imgObj.filters != "undefined" )
        {
       		this.imgObj.style.filter = 'blendTrans(duration=1)';
            if (this.imgObj.filters.blendTrans)
                this.imgObj.filters.blendTrans.Apply();
        }
    
        // nouvelle image
        this.imgObj.src = this.imgObj.imgs[this.ctr].src;
    
        // modification du texte
        this.txtObj.innerHTML = this.txtObj.txts[this.ctr];
    
        // modification du lien
        this.txtObj.href = this.txtObj.liens[this.ctr];
    
        if ( typeof this.imgObj.filters != "undefined" && this.imgObj.filters.blendTrans )
            this.imgObj.filters.blendTrans.Play();
      }
    }
     
    // sets up rotation for all defined randImgObjs
    randImgObj.start = function() 
    {
      for (var i=0; i<randImgObjs.length; i++) 
        randImgObjs[i].timer = setInterval(randImgObjs[i].animString + ".rotate()", randImgObjs[i].speed);                     
    }
     
    randImgObj.setUpImg = function(imgAr, sp, w, h)
    {
      var rotator, img, imgStr = "";
      var n, txt, lien;                   //creation des variables n, txt et lien
    
      rotator = new randImgObj(sp);
    
      randImgObjs[randImgObjs.length-1].imgAr = imgAr;
    
      //imgAr.shuffle();   // mise en commentaire de la fonction de mélange
    
      n = Math.floor( Math.random() * imgAr[0].length );   // tirage d'une valeur aléatoire
    
      img = imgAr[ 0 ][ n ];     // on prend l image n
      txt = imgAr[ 1 ][ n ];     // on prend le texte n de l image n
      lien = imgAr[ 2 ][ n ];    // on prend l'url n
    
    
      // pas de modification de ce code
      imgStr += '<img src="' + randImgObj.imagesPath + img + '" alt="" ';
      imgStr += 'name="img' + (randImgObjs.length-1) + '" width="' + w + '" height="' + h + '">';
    
      // creation de la zone de texte
      imgStr += '<div style="font-size: 20pt; text-align: center">';
      imgStr += '<a id="txtImg' + (randImgObjs.length-1) + '" + href="' + lien + '">' + txt + '</a>';
      imgStr += '</div>';
    
      document.write(imgStr);
    }
     
    function initRandRotation() 
    {
      for (var i=0; randImgObjs[i]; i++) 
      {
        var rotator = randImgObjs[i];
        rotator.imgObj = document.images["img" + i]; // get reference to the image object
    
        // on recupere la zone de texte et de liens des images
        rotator.txtObj = document.getElementById("txtImg" + i);
    
        rotator.addImages(rotator.imgAr);
    
        rotator.rotate();
      }
      randImgObj.start();  
    }
     
    //-->
    
    </script>
    </head>
    
    <body onload="initRandRotation()">
    
    <div style="background-color: #DDD; width: 500px; border: 4px ridge #DDD">
        <script type="text/javascript">
        //  images array_img, delay, width and height of images
        randImgObj.setUpImg(randImgObj.set1, 4600, 474, 174);
        </script>
    </div>
    
    </body>
    
    </html>

    Remarques :
    • le tableau d'entrée randImgObj.set1 est à 3 dimensions
      syntaxe :
      Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
      1
      2
      3
      4
      5
      6
      randImgObj.set1 = new Array( 
                                   ["i1.gif", "i2.gif", "i3.gif", "i4.gif", "i5.gif"],  
                                   ["Texte 1", "Texte 2", "Texte 3", "Texte 4", "Texte 5"],
                                   ["url_1", "url_2", "url_3", "url_4", "url_5"]
                                  );
      écris ta liste des images, puis les titres et enfin les url. N'oublie pas les crochets et les virgules !! ;
    • randImgObj.setUpImg : j'ai mis en commentaire l'appel de la méhode imgAr.shuffle() (pas adaptée pour un tableau 3D). J'ai ajouté des variables. Le tableau imgAr est à 3 dimensions au lieu de 1, j'ai modifié le code en conséquence ;
    • addImages : j'ai ajouté des variables et modifé la variable de boucle (ar[0][i] au lieu de ar[i] - car ar est un tableau à 3 dimensions) ;
    • rotate : j'ai ajouté de quoi modifier le contenu de la balise <a> ;
    • initRandRotation : ajout du code pour récupérer les objets de type <a>
    • dans le body, l'appel de la fonction n'a pas changé :
      Code html : Sélectionner tout - Visualiser dans une fenêtre à part
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
       
      <body onload="initRandRotation()">
       
      <div style="background-color: #DDD; width: 500px; border: 4px ridge #DDD">
          <script type="text/javascript">
          //  images array_img, delay, width and height of images
          randImgObj.setUpImg(randImgObj.set1, 4600, 474, 174);
          </script>
      </div>
       
      </body>


    Dernière remarque : dans la fonction rotate() il faut avouer que le code qui génère un nombre aléatoire :
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
     
        var ctr = Math.floor( Math.random() * this.imgObj.imgs.length );
     
        if (ctr == this.ctr)
            ctr = (ctr > 0)? --ctr: ++ctr;
     
        this.ctr = ctr;
    n'est pas très au point... Tu risques de voir plus souvent certaines images que d'autres.


    Je ne pense pas avoir fait d'erreur en modifiant le script...
    Au fait où as-tu trouvé ce script ?

  7. #7
    Membre éclairé Avatar de Alexandrebox
    Profil pro
    Inscrit en
    Août 2006
    Messages
    635
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : Août 2006
    Messages : 635
    Par défaut
    Merci beaucoup pour ton aide. Tu expliques mieux que le livre que j'ai acheté.

    J'ai trouvé ce code dans un livre de javascript que j'ai acheté. Je copie bêtement le code parce que je ne comprends rien. Mais ça fonctionne.

    Ton code fonctionne, mais il y a aucun texte qui s'affiche, Normalement au moins texte1, texte2 doivent être visibles. Ce que je cherche à faire, c'est que après affichage de l'image, ensuite <br> et le texte. si tu peux m'aider à afficher le texte en dessous de l'image stp, ce sera cool

    D'avance je te remercie beaucoup

  8. #8
    Expert confirmé
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 660
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 660
    Par défaut
    Citation Envoyé par Alexandrebox Voir le message
    Ton code fonctionne, mais il y a aucun texte qui s'affiche, Normalement au moins texte1, texte2 doivent être visibles. Ce que je cherche à faire, c'est que après affichage de l'image, ensuite <br> et le texte. si tu peux m'aider à afficher le texte en dessous de l'image stp, ce sera cool
    pas de texte ?

    De mon côté je n'ai aucun problème (IE et FF). Le texte s'affiche sous l'image et au centre. Comme c'est un lien il est en bleu et souligné. Tes images font moins que 474x174 px ?

  9. #9
    Membre éclairé Avatar de Alexandrebox
    Profil pro
    Inscrit en
    Août 2006
    Messages
    635
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : Août 2006
    Messages : 635
    Par défaut
    Mea culpa. Ton texte est visible. Le lien aussi.
    Je ne le voyais pas parce qu'il est déssendu trop bas. Mais je sais d'où vient le problème. C'est au niveau de mes images. Sans mon design tout est parfait, donc vais revoir mon design

    Merci beaucoup

    Tu es très gentil. Je peux t'envoyer les codes si tu en as besoin.

  10. #10
    Membre éclairé Avatar de Alexandrebox
    Profil pro
    Inscrit en
    Août 2006
    Messages
    635
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : Août 2006
    Messages : 635
    Par défaut
    J'ai corrigé le design et le texte s'affiche actuellement correctement.
    J'ai ajouté un <br> pour qu'il ait un peu d'espace entre la photo et le texte. Malhereusement, ça ne change rien. Peut-êtr ne l'ai pas mis au bon endroit?

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
      // creation de la zone de texte
      imgStr += '<div style="font-size: 12pt; text-align: center">';
      imgStr += '<a id="txtImg' + (randImgObjs.length-1) + '" + href="' + lien + '">' + "<br>" + txt + '</a>';
      imgStr += '</div>';
    Merci pour ton aide

  11. #11
    Membre éclairé Avatar de Alexandrebox
    Profil pro
    Inscrit en
    Août 2006
    Messages
    635
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : Août 2006
    Messages : 635
    Par défaut
    Pas se souci j'ai trouvé, il faut modifier la feuille de style tout bêtement. Au fait, tu m'as tout fait petit coquin.
    Je suis trop content.

    Merci beaucoup

  12. #12
    Expert confirmé
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 660
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 660
    Par défaut
    Content de savoir que ton script fonctionne

    La balise <br> est inutile ici joue avec les padding du div (visiblement c'est ce que tu as fait).

    L'idéal serait de mettre l'image dans le div et d'ajouter une marge sous l'image (fonction randImgObj.setUpImg) :
    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
     
      //conteneur
      imgStr += '<div style="font-size: 20pt; text-align: center">';
     
      // image avec une marge en bas de 20px (margin-bottom)
      imgStr += '<img style="margin-bottom: 20px" src="' + randImgObj.imagesPath + img + '" alt="" ';
      imgStr += 'name="img' + (randImgObjs.length-1) + '" width="' + w + '" height="' + h + '">';
     
      //ajout d'un saut de ligne
      imgStr += '<br>';
     
      // creation de la zone de texte (lien)
      imgStr += '<a id="txtImg' + (randImgObjs.length-1) + '" + href="' + lien + '">' + txt + '</a>';
     
      imgStr += '</div>';
     
      document.write(imgStr);

    comme ça le lien et l'image forment un bloc

    => pour aller plus loin : on a tendance à préférer les méthodes createElement() et appendChild() pour ajouter un élement dans la page plutôt que document.write() qui réserve parfois de mauvaises surprises



    Si ton problème est résolu n'oublie pas de marquer la discussion (outils de la discussion)

  13. #13
    Membre éclairé Avatar de Alexandrebox
    Profil pro
    Inscrit en
    Août 2006
    Messages
    635
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : Août 2006
    Messages : 635
    Par défaut
    J'ai fait tout ce que tu m'as dit et ça marche nickel.
    Merci beaucoup

    Ok je vais mettre résolu.

  14. #14
    Membre éclairé Avatar de Alexandrebox
    Profil pro
    Inscrit en
    Août 2006
    Messages
    635
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : Août 2006
    Messages : 635
    Par défaut Un lien sur chaque photo du diaporama
    Bonjour,
    C'est encore moi. Tu m'avais appris à faire le lien en dessous de l'image qui s'affiche. Je cherche à faire le même lien sur la photo qui s'affiche.
    ça marche mais le lien n'est pas celui de la photo qui s'affiche alors que le lien du texte est juste.

    Pourras-tu m'aider STP

    Voici le code
    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
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    <script type="text/javascript">
    <!--
    // image file names go in these arrays
    randImgObj.set1 = new Array( ["photo1.gif", "photo2.gif"],
                                 ["Studio de danse: pour lire la vidéo, cliquez ici", "Production de films: pour lire la vidéo, cliquez ici"],
                                 ["danse.htm", "film.htm"]
                                );
     
     
     
    // If all the images you wish to display are in the same location, you can specify the path here 
    randImgObj.imagesPath = "images2/";
     
    // No need to edit code below this line 
    /////////////////////////////////////////////////////////////////////
    Array.prototype.shuffle = function() 
    {
      var i, temp, i1, i2;
      for (i=0; i<this.length; i++) 
      {
        i1 = Math.floor( Math.random() * this.length );
        i2 = Math.floor( Math.random() * this.length );
        temp = this[i1];
        this[i1] = this[i2];
        this[i2] = temp;
      }
    }
     
    randImgObjs = []; // holds all random rotating image objects defined
    // constructor 
    function randImgObj(s) 
    {
      this.speed=s; 
      this.ctr=0; 
      this.timer=0;
     
      this.index = randImgObjs.length;
      randImgObjs[this.index] = this;
     
      this.animString = "randImgObjs[" + this.index + "]";
    }
     
    randImgObj.prototype = 
    {
      addImages: function(ar)
      { // preloads images
        this.imgObj.imgs = [];
     
        this.txtObj.txts = [];      //tableau des textes
        this.txtObj.liens = [];     //tableau des liens
     
     
        for (var i=0; ar[0][i]; i++)
        {
          this.imgObj.imgs[i] = new Image();
          this.imgObj.imgs[i].src = randImgObj.imagesPath + ar[0][i];   //0 : index des images
     
          // remplissage des tableaux txts et liens
          this.txtObj.txts[i] = ar[1][i];     // 1: index des textes
          this.txtObj.liens[i] = ar[2][i];    // 2: index des liens
     
        }
      },
     
      rotate: function()
      { // controls rotation
     
        var ctr = Math.floor( Math.random() * this.imgObj.imgs.length );
     
        if (ctr == this.ctr)
            ctr = (ctr > 0)? --ctr: ++ctr;
     
      this.ctr = ctr;
     
        if ( typeof this.imgObj.filters != "undefined" )
        {
       		this.imgObj.style.filter = 'blendTrans(duration=1)';
            if (this.imgObj.filters.blendTrans)
                this.imgObj.filters.blendTrans.Apply();
        }
     
        // nouvelle image
        this.imgObj.src = this.imgObj.imgs[this.ctr].src;
     
        // modification du texte
        this.txtObj.innerHTML = this.txtObj.txts[this.ctr];
     
        // modification du lien
        this.txtObj.href = this.txtObj.liens[this.ctr];
     
        if ( typeof this.imgObj.filters != "undefined" && this.imgObj.filters.blendTrans )
            this.imgObj.filters.blendTrans.Play();
      }
    }
     
    // sets up rotation for all defined randImgObjs
    randImgObj.start = function() 
    {
      for (var i=0; i<randImgObjs.length; i++) 
        randImgObjs[i].timer = setInterval(randImgObjs[i].animString + ".rotate()", randImgObjs[i].speed);                     
    }
     
    randImgObj.setUpImg = function(imgAr, sp, w, h)
    {
      var rotator, img, imgStr = "";
      var n, txt, lien;                   //creation des variables n, txt et lien
     
      rotator = new randImgObj(sp);
     
      randImgObjs[randImgObjs.length-1].imgAr = imgAr;
     
      //imgAr.shuffle();   // mise en commentaire de la fonction de mélange
     
      n = Math.floor( Math.random() * imgAr[0].length );   // tirage d'une valeur aléatoire
     
      img = imgAr[ 0 ][ n ];     // on prend l image n
      txt = imgAr[ 1 ][ n ];     // on prend le texte n de l image n
      lien = imgAr[ 2 ][ n ];    // on prend l'url n
     
      // ICI J'ESSAIE DE FAIRE LE LIEN AUTOUR DE LA PHOTO
      imgStr += '<a ' + (randImgObjs.length) + '" + href="' + lien + '">';
      imgStr += '<img src="' + randImgObj.imagesPath + img + '" alt="" border = "0"';
      imgStr += 'name="img' + (randImgObjs.length-1) + '" width="' + w + '" height="' + h + '">';
      imgStr += '</a>';
     
      // creation de la zone de texte
      imgStr += '<div style="font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif; text-align: left; padding-top: 16px; padding-left: 8px; color: #000000">';
      imgStr += '<a id="txtImg' + (randImgObjs.length-1) + '" + href="' + lien + '">' + txt + '</a>';
      imgStr += '</div>';
     
      document.write(imgStr);
    }
     
    function initRandRotation() 
    {
       for (var i=0; randImgObjs[i]; i++) 
      {
        var rotator = randImgObjs[i];
        rotator.imgObj = document.images["img" + i]; // get reference to the image object
     
        // on recupere la zone de texte et de liens des images
        rotator.txtObj = document.getElementById("txtImg" + i);
     
        rotator.addImages(rotator.imgAr);
     
        rotator.rotate();
      }
      randImgObj.start();  
    }
     
    //-->
     
    </script>
    <STYLE type=text/css>BODY {
    	MARGIN: 0px
    }
    </STYLE>
    <META content="MSHTML 6.00.6000.16544" name=GENERATOR></HEAD>
    <BODY onload=initRandRotation();>
    <table width="320" height="300" border="0" background="fond2.jpg">
      <tr>
        <td valign="top"><SCRIPT type=text/javascript>
    //  images array, delay, width and height of images
    randImgObj.setUpImg(randImgObj.set1, 4600, 320, 236);
     
    </SCRIPT>

  15. #15
    Expert confirmé
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 660
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 660
    Par défaut
    Déjà, je ne suis pas sûr d'avoir suffisament de temps pour te donner une réponse avant la fin de la semaine

    Laisse moi le temps de me remérorer ce script et revoir les corrections que j'ai faites

    Déjà je peux te dire qu'il y a une erreur
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
      // ICI J'ESSAIE DE FAIRE LE LIEN AUTOUR DE LA PHOTO
      imgStr += '<a ' + (randImgObjs.length) + '" + href="' + lien + '">';
      imgStr += '<img src="' + randImgObj.imagesPath + img + '" alt="" border = "0"';
      imgStr += 'name="img' + (randImgObjs.length-1) + '" width="' + w + '" height="' + h + '">';
      imgStr += '</a>';
    Tu as une valeur sans son attribut...

    De plus pour autant que je me souviennes, j'ai ajouté du code dans d'autres fonctions... Là comme tu ajoutes une balise il faudra sans doute ajouter du code ailleurs.

  16. #16
    Membre éclairé Avatar de Alexandrebox
    Profil pro
    Inscrit en
    Août 2006
    Messages
    635
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : Août 2006
    Messages : 635
    Par défaut
    Ok merci beaucoup pour ta réponse.
    Je vais attendre que tu aies le temps de m'aider.

    Bonne journée et à bientôt

  17. #17
    Expert confirmé
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 660
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 660
    Par défaut
    j'ai revu le script, j'ai rajouté une balise <a> autour de l'image et j'ai corrigé une faute de frappe L'image est donc cliquable.

    Code x : 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
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    <html>
    <head>
    <title></title>
    
    <script type="text/javascript">
    <!--
    // image file names go in these arrays
    randImgObj.set1 = new Array( ["photo1.gif", "photo2.gif"],
                                 ["Studio de danse: pour lire la vidéo, cliquez ici", "Production de films: pour lire la vidéo, cliquez ici"],
                                 ["danse.htm", "film.htm"]
                                );
     
     
     
    // If all the images you wish to display are in the same location, you can specify the path here 
    randImgObj.imagesPath = "images2/";
    
    // No need to edit code below this line 
    /////////////////////////////////////////////////////////////////////
    Array.prototype.shuffle = function() 
    {
      var i, temp, i1, i2;
      for (i=0; i<this.length; i++) 
      {
        i1 = Math.floor( Math.random() * this.length );
        i2 = Math.floor( Math.random() * this.length );
        temp = this[i1];
        this[i1] = this[i2];
        this[i2] = temp;
      }
    }
     
    randImgObjs = []; // holds all random rotating image objects defined
    // constructor 
    function randImgObj(s) 
    {
      this.speed=s; 
      this.ctr=0; 
      this.timer=0;
    
      this.index = randImgObjs.length;
      randImgObjs[this.index] = this;
    
      this.animString = "randImgObjs[" + this.index + "]";
    }
     
    randImgObj.prototype = 
    {
      addImages: function(ar)
      { // preloads images
        this.imgObj.imgs = [];
    
        this.txtObj.txts = [];      //tableau des textes
        this.txtObj.liens = [];     //tableau des liens du texte
        
        this.lienImg.liens = [];
    
        for (var i=0; ar[0][i]; i++)
        {
          this.imgObj.imgs[i] = new Image();
          this.imgObj.imgs[i].src = randImgObj.imagesPath + ar[0][i];   //0 : index des images
    
          // remplissage des tableaux txts et liens
          this.txtObj.txts[i] = ar[1][i];     // 1: index des textes
          this.txtObj.liens[i] = ar[2][i];    // 2: index des liens
          
          this.lienImg.liens[i] = ar[2][i];
        }
      },
    
      rotate: function()
      { // controls rotation
    
        var ctr = Math.floor( Math.random() * this.imgObj.imgs.length );
    
        if (ctr == this.ctr)
            ctr = (ctr > 0)? --ctr: ++ctr;
    
        this.ctr = ctr;
    
        if ( typeof this.imgObj.filters != "undefined" )
        {
       		this.imgObj.style.filter = 'blendTrans(duration=1)';
            if (this.imgObj.filters.blendTrans)
                this.imgObj.filters.blendTrans.Apply();
        }
    
        // nouvelle image
        this.imgObj.src = this.imgObj.imgs[this.ctr].src;
    
        // modification du texte
        this.txtObj.innerHTML = this.txtObj.txts[this.ctr];
    
        // modification du lien
        this.txtObj.href = this.txtObj.liens[this.ctr];
        
        this.lienImg.href = this.lienImg.liens[this.ctr];
    
        if ( typeof this.imgObj.filters != "undefined" && this.imgObj.filters.blendTrans )
            this.imgObj.filters.blendTrans.Play();
      }
    }
     
    // sets up rotation for all defined randImgObjs
    randImgObj.start = function() 
    {
      for (var i=0; i<randImgObjs.length; i++) 
        randImgObjs[i].timer = setInterval(randImgObjs[i].animString + ".rotate()", randImgObjs[i].speed);                     
    }
     
    randImgObj.setUpImg = function(imgAr, sp, w, h)
    {
      var rotator, img, imgStr = "";
      var n, txt, lien;                   //creation des variables n, txt et lien
    
      rotator = new randImgObj(sp);
    
      randImgObjs[randImgObjs.length-1].imgAr = imgAr;
    
      //imgAr.shuffle();   // mise en commentaire de la fonction de mélange
    
      n = Math.floor( Math.random() * imgAr[0].length );   // tirage d'une valeur aléatoire
    
      img = imgAr[ 0 ][ n ];     // on prend l image n
      txt = imgAr[ 1 ][ n ];     // on prend le texte n de l image n
      lien = imgAr[ 2 ][ n ];    // on prend l'url n
    
      //conteneur
      imgStr += '<div style="font-size: 20pt; text-align: center">';
    
      imgStr += '<a id="lienImg' + (randImgObjs.length-1) + '" href="' + lien + '">';
    
      // image avec une marge en bas de 20px (margin-bottom)
      imgStr += '<img style="border: none; margin-bottom: 20px; width:' + w + 'px; height:' + h + 'px;" ';
      imgStr += 'src="' + randImgObj.imagesPath + img + '" alt="" ';
      imgStr += 'name="img' + (randImgObjs.length-1) + '">';
    
      imgStr += "</a>";
    
      //ajout d'un saut de ligne
      imgStr += '<br>';
    
      // creation de la zone de texte (lien)
      imgStr += '<a id="lienTxt' + (randImgObjs.length-1) + '" href="' + lien + '">';
      imgStr += txt;
      imgStr += '</a>';
    
      imgStr += '</div>';
    
    
      document.write(imgStr);
    }
     
    function initRandRotation() 
    {
      for (var i=0; randImgObjs[i]; i++) 
      {
        var rotator = randImgObjs[i];
        rotator.imgObj = document.images["img" + i]; // get reference to the image object
    
        // on recupere la zone de texte et de liens des images
        rotator.txtObj = document.getElementById("lienTxt" + i);
    
        // lien sur image
        rotator.lienImg = document.getElementById("lienImg" + i);
    
        rotator.addImages(rotator.imgAr);
    
        rotator.rotate();
      }
      randImgObj.start();  
    }
     
    //-->
    
    </script>
    </head>
    
    <body onload="initRandRotation()">
    
    <div style="background-color: #DDD; width: 500px; border: 4px ridge #DDD">
        <script type="text/javascript">
        //  images array_img, delay, width and height of images
        randImgObj.setUpImg(randImgObj.set1, 4600, 474, 174);
        </script>
    </div>
    
    </body>
    
    </html>

Discussions similaires

  1. Ajout de paramètres dans le path du forward
    Par sylvain_neus dans le forum Struts 1
    Réponses: 6
    Dernier message: 14/11/2007, 17h31
  2. PortletRequest ajout de paramètres
    Par qwiskas dans le forum Servlets/JSP
    Réponses: 1
    Dernier message: 22/12/2006, 16h28
  3. Réponses: 3
    Dernier message: 10/05/2006, 18h40
  4. [ajouter des paramètres au post avant envoi]
    Par jean-jacques varvenne dans le forum Général JavaScript
    Réponses: 10
    Dernier message: 11/04/2006, 18h01
  5. Passer un paramètre dans le script
    Par ipeteivince dans le forum Windows
    Réponses: 2
    Dernier message: 02/03/2006, 17h00

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