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

**Alexandrebox** · 29/01/2008, 16h48

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

**Auteur** · 30/01/2008, 15h21

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 ?

**Alexandrebox** · 30/01/2008, 16h10

Merci déjà pour ta réponse.
Oui ce titre est un lien. donc le texte sera cliquable

**Auteur** · 30/01/2008, 16h15

texte est différent de l'url (et dans ce cas il faut créer un autre objet) ou le texte est l'url ?

**Alexandrebox** · 30/01/2008, 17h23

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

**Auteur** · 30/01/2008, 20h20

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 ?

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

JavaScript

Vue hybride

Discussions similaires

Partager

Partager