Défilement de textes et d'images [Débutant(e)]

**jemapo** · 09/02/2009, 21h23

Envoyé par Auteur

Le code fonctionne sous IE7 et FF.
Le code n'a pas été testé sous IE6, Opéra, Konqueror, Safari (à vérifier donc ).

salut auteur, petit problème
j'ai copier tes codes dans ma page oui le texte apparait en diaporama.

je vais changer var texte = ceci est etc etc
je mais var chemin = "images\\" mais ou von les images ou l'adresse des image

mes image son dans un fichier nommé diaporama de na page web
l'adresse est mes document/mes siteweb/theorecreo/image/diaporama
j'ai 5 images a incorporer au secour jemapo

**Auteur** · 09/02/2009, 22h45

bonjour,

comme je l'ai indiqué, il y a une faute de frappe dans le chemin indiqué dans l'exemple :

[Bug]
Dans les codes sources : remplacez

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

var chemin = "images\\";

par

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

var chemin = "images/";

[/Bug]

Il faut séparer les dossiers par le caractère / et non pas par \\

Ensuite, il faut indiquer un chemin relatif.
Si ton fichier HTML se trouve dans le dossier

Code x :

Sélectionner tout - Visualiser dans une fenêtre à part

/mon site web/

et tes images dans

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

mon site web/theorecreo/image/diaporama/

il faut :

Code x :

Sélectionner tout - Visualiser dans une fenêtre à part

var chemin = "/theorecreo/image/diaporama/";

**jemapo** · 10/02/2009, 00h32

Envoyé par Auteur

bonjour,

comme je l'ai indiqué, il y a une faute de frappe dans le chemin indiqué dans l'exemple :

Il faut séparer les dossiers par le caractère / et non pas par \\

Ensuite, il faut indiquer un chemin relatif.
Si ton fichier HTML se trouve dans le dossier

Code x :

Sélectionner tout - Visualiser dans une fenêtre à part

/mon site web/

et tes images dans

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

mon site web/theorecreo/image/diaporama/

il faut :

Code x :

Sélectionner tout - Visualiser dans une fenêtre à part

var chemin = "/theorecreo/image/diaporama/";

voici ce que j'ai fais

j'ai changer <script typt "texte/javascript">
pour <..............."images/javascrript">

après texte à faire défiler j'ai incorporer
var chemin : "/theorecreo/diaporama/" et tout le reste que j'ai copier coller

après tout les code de var chemin j'ai garder
var vitesse : "10" vitesse du défilement ceci était la suite du
< script type "texte/javascript"> avant que je colle var chemin :

et je voudrais une fenêtre de 160pixel x 160 pixel pour l'affichage des images sur ma page web

je ne sais plus quoi faire vous avez la preuve que ces ma première page web

j'ai oublier mes photos sont en jpeg comme écrit à la ligne
var tabImg : new
merci
jemapo

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
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
 
 
                             <td height="162">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </td>
                                  <!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>Défilement de texte</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{
  width: 400px;
  border: 5px #DDDDDD ridge;	/* bordure du conteneur */
 
  overflow: hidden;	/* on cache les barres de défilement */
  padding-left: 0px;      /* /!\ pas de padding-left ni de padding right /!\ */
  padding-right: 0px;  
  padding-top: 15px;          /* padding-top et padding-bottom pour un centrage vertical */
  padding-bottom: 15px;
}
 
/* style du texte qui doit défiler */
.aspectTexte{
 font-size: 20pt;
 font-family: Comic Sans MS;
 color: #0000FF;
}
-->
</style>
 
<script type="images/javascript">
<!--
// Texte à faire défiler :
var chemin = "/theorecreo/diaporama/"; // dossier contenant les images
var tabImg = new Array("logo.jpeg", "scooter.jpeg", "quad.jpeg", "vtt.jpeg", "rhino.jpeg");
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];
}
 
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); 
  }
}
var vitesse = "10";     //vitesse de défilement (en ms)
var pas = 2;            //pas de défilement (en px)
var sens = 1;  //1=> de la droite vers la gauche (par défaut)
               //-1=> de la gauche vers la droite
 
// Fonctions du diaporama               
var conteneur , chrono, X;
 
function creationDiaporama()
{
  var noeudDiv, noeudTxt, crlf, noeudSpan;
 
  conteneur = document.getElementById("conteneur");
 
  noeudDiv = document.createElement("div");
  noeudSpan = document.createElement("span");
  crlf = document.createElement("nobr");
  noeudTxt = document.createTextNode(texte);
 
 
  crlf.appendChild(noeudTxt);
  noeudSpan.appendChild(crlf);
  noeudDiv.appendChild(noeudSpan);
  conteneur.appendChild(noeudDiv);
 
  noeudDiv.style.textAlign = "center";
  noeudDiv.style.padding = "0px";
  noeudDiv.style.margin = "0px";
 
  noeudSpan.className = "aspectTexte";
 
  if (noeudSpan.offsetWidth<conteneur.scrollWidth)
    noeudDiv.style.width = conteneur.scrollWidth*3+"px";
  else
    noeudDiv.style.width = noeudSpan.scrollWidth*3+"px";
 
  if (sens!=-1 && sens!=1)
    sens = 1;
 
  if (sens==1)  
    X = 0; 
  else
  {
    conteneur.scrollLeft = conteneur.scrollWidth;  
    X = conteneur.scrollLeft;
  } 
 
  chrono = setTimeout("defile()",vitesse);
}
 
// Défilement du texte
function defile()
{
  X = X + (sens)*pas;
  conteneur.scrollLeft = X;
 
  if (sens==1)
  {
    if (conteneur.scrollLeft<X)
      X = 0;
    chrono = setTimeout("defile()",vitesse); 
  }
  else
  {
    if (conteneur.scrollLeft==0)
    {
        conteneur.scrollLeft = conteneur.scrollWidth;
        X = conteneur.scrollLeft;
    }
    chrono = setTimeout("defile()",vitesse);
  }
}
 
// Arret du défilement lorsque l'on ferme la page
function stopDiaporama()
{
  clearTimeout(chrono);
}
 
//-->
</script>
 
</head>
 
<body onload="creationDiaporama()" onunload="stopDiaporama()">
 
<div id="conteneur" class="conteneur">
</div>

**Auteur** · 10/02/2009, 12h22

bonjour jemapo,

je crois que tu as mélangé deux scripts : celui du post 1 ("défilement alterné de textes et d'images") et celui du post 4 ("simple diaporama"). Le script du message n°4 est un script qui permet de faire défiler les images en utilisant des boutons "précédent", "suivant", "premier", "dernier".

Ces scripts sont indépendants. Ne les mélange pas

j'ai changer <script typt "texte/javascript">
pour <..............."images/javascrript">

Pour ce qui est de la balise script c'est toujours :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<script type="text/javascript">/

cette balise définit le type de données contenues entre les balises script. Que tu fasses défiler des images ou du texte ou autre chose, le javascript est du texte

Dis moi précisément ce que tu souhaites faire

**jemapo** · 10/02/2009, 22h12

Envoyé par Auteur

bonjour jemapo,

je crois que tu as mélangé deux scripts : celui du post 1 ("défilement alterné de textes et d'images") et celui du post 4 ("simple diaporama"). Le script du message n°4 est un script qui permet de faire défiler les images en utilisant des boutons "précédent", "suivant", "premier", "dernier".

Ces scripts sont indépendants. Ne les mélange pas

Pour ce qui est de la balise script c'est toujours :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<script type="text/javascript">/

cette balise définit le type de données contenues entre les balises script. Que tu fasses défiler des images ou du texte ou autre chose, le javascript est du texte

Dis moi précisément ce que tu souhaites faire

salut auteur, voici
j'ai 5 images ( 1 logo et 4 autres photos des images de produit) que je veut voir apparaitre a tour de role dans une petite fenêtre au centre de ma page web.
la fenêtre je la veut centre aux dimension de 160 pixel X 160 pixel
couleur de fond de la fenêtre 098cd2
la grosseur du cadre celui dans le programme me convient bien
je veut que les photos soient en boucle et qu'ils arrête a la fermeture de la page voila
si tu as d'autre question tu peut me faire parvenir un courier tu est dans ma liste merci jemapo

**Auteur** · 10/02/2009, 23h18

Envoyé par jemapo

salut auteur, voici
j'ai 5 images ( 1 logo et 4 autres photos des images de produit) que je veut voir apparaitre a tour de role dans une petite fenêtre au centre de ma page web.

ok... ces scripts réalisent des défilements. A toi de choisir ce que tu souhaites :
- défilement alterné de gauche à droite puis de droite à gauche (cf. message n°1)
- défilement alterné de haut en bas puis du bas vers le haut (cf. message n°1)
- défilement (manuel) des images avec des boutons (cf. message 4)

Envoyé par jemapo

la fenêtre je la veut centre aux dimension de 160 pixel X 160 pixel
couleur de fond de la fenêtre 098cd2

Pour cela il faut modifier les paramètres de la feuilles de style

Envoyé par jemapo

je veut que les photos soient en boucle et qu'ils arrête a la fermeture de la page voila

Pour un défilement en boucle tu prends soit le 1er script soit le second script du 1er message (ils sont en pièce jointe).
Le défilement commence dès que la page est chargée, et s'arrête lors de la fermeture de la page, donc sur ce point il n'y a pas de souci à se faire.

Pour les scripts de défilement alterné tu as seulement 3 variables à renseigner :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
 // chemin relatif (par rapport au fichier HTML) du dossier contenant les images
var chemin = "images/";
 
// le noms des images à afficher
var tabImg = new Array("i1.gif","i2.gif","i3.gif","i4.gif","i5.gif");
 
// la légende des images (pas obligatoire)
// par exemple ci-dessous les images 3 et 4 n'ont pas de légende
var tabTxt = new Array("Image 1", "Voici un long et ennuyeux commentaire sur l'image2", "", "", "Image5");

puis du côté HTML ajoute dans la balise body les événements onload et onunload :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<body onload="creationDiaporama()" onunload="stopDiaporama()">

puis dans ta page le div qui contient le diaporama :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="conteneur" id="conteneur"></div>

ensuite pour avoir un cadre de 160px * 160px regarde la partie CSS et repère ces lignes :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
.conteneur, .cellule{
	height: 150px;	/* valeur modifiable ;-) /!\ entrer des valeurs en pixel /!\ */
	width: 230px;   
}

mets les propriétés heigth et width à 160px. Attention ce sont les dimensions du conteneur ! Si tes images sont dépassent les 160 px ou si ton texte est trop long, l'affichage sera tronqué.

**jemapo** · 11/02/2009, 20h00

Envoyé par Auteur

ok... ces scripts réalisent des défilements. A toi de choisir ce que tu souhaites :
- défilement alterné de gauche à droite puis de droite à gauche (cf. message n°1)
- défilement alterné de haut en bas puis du bas vers le haut (cf. message n°1)
- défilement (manuel) des images avec des boutons (cf. message 4)

Pour cela il faut modifier les paramètres de la feuilles de style

Pour un défilement en boucle tu prends soit le 1er script soit le second script du 1er message (ils sont en pièce jointe).
Le défilement commence dès que la page est chargée, et s'arrête lors de la fermeture de la page, donc sur ce point il n'y a pas de souci à se faire.

Pour les scripts de défilement alterné tu as seulement 3 variables à renseigner :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
 // chemin relatif (par rapport au fichier HTML) du dossier contenant les images
var chemin = "images/";
 
// le noms des images à afficher
var tabImg = new Array("i1.gif","i2.gif","i3.gif","i4.gif","i5.gif");
 
// la légende des images (pas obligatoire)
// par exemple ci-dessous les images 3 et 4 n'ont pas de légende
var tabTxt = new Array("Image 1", "Voici un long et ennuyeux commentaire sur l'image2", "", "", "Image5");

puis du côté HTML ajoute dans la balise body les événements onload et onunload :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<body onload="creationDiaporama()" onunload="stopDiaporama()">

puis dans ta page le div qui contient le diaporama :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="conteneur" id="conteneur"></div>

ensuite pour avoir un cadre de 160px * 160px regarde la partie CSS et repère ces lignes :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
.conteneur, .cellule{
	height: 150px;	/* valeur modifiable ;-) /!\ entrer des valeurs en pixel /!\ */
	width: 230px;   
}

mets les propriétés heigth et width à 160px. Attention ce sont les dimensions du conteneur ! Si tes images sont dépassent les 160 px ou si ton texte est trop long, l'affichage sera tronqué.

salut auteur, voici

le var chemin je n'y arrive pas
voici ce que tu m'a envoyé

// chemin relatif (par rapport au fichier HTML) du dossier contenant les images
var chemin = "images/";

// le noms des images à afficher
var tabImg = new Array("i1.gif","i2.gif","i3.gif","i4.gif","i5.gif");

// la légende des images (pas obligatoire)
// par exemple ci-dessous les images 3 et 4 n'ont pas de légende
var tabTxt = new Array("Image 1", "Voici un long et ennuyeux commentaire sur l'image2", "", "", "Image5");

voici le mien

var chemin = "mes sites web/théorecreo/images/"; voici l'adresse (dossier mes sites web)
var tabImg : new array("i1.logo","i2.scooter","i3.quads","i4.vtt","i5.rhino"); (nommé les images)
var tabTxt : new array("i1.<img src="image/diapo/logo.jpg" alt="" />", "images", "Image3", "Image4", "Image5","images6");je clic sur ajouter une images et voila ce que ca donne et ca ne fonctionne pas)

var vitesse = "10"; //vitesse de défilement (en ms)
var pas = 2; //pas de défilement (en px)
var sens = 1; //1=> de la droite vers la gauche (par défaut)
//-1=> de la gauche vers la droite

tout le reste j'ai réussi mes pas lui je me demande si je ne doit pas écrire l'adresse //C:/mesdocuments and setting/ ????????/???????/
il n'y as aucune images qui apparait.

merci un décourager
jemapo

**Auteur** · 11/02/2009, 21h41

jemapo :

voici le mien

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
var chemin = "mes sites web/théorecreo/images/"; 
var tabImg : new array("i1.logo","i2.scooter","i3.quads","i4.vtt","i5.rhino"); 
var tabTxt : new array("i1.<img src="image/diapo/logo.jpg" alt="" />", "images", "Image3", "Image4", "Image5","images6");

je clic sur ajouter une images et voila ce que ca donne et ca ne fonctionne pas)

euh

Pour la variable chemin c'est a priori juste.... Par contre, tabImg et tabTxt

- tabImg :
Une image a un nom et une extension : le séparateur est le point. Concrètement le nom est de la forme : tonFichier.ext (ext est l'extension).
Dans ton cas tes images doivent avoir un nom du genre : logo.jpg ; scooter.jpg, etc. non ?
Ce sont ces noms que tu dois taper dans tabImg.

- tabTxt : écris simplement du texte....

petite question :
as-tu des bases en HTML et javascript ?

**jemapo** · 11/02/2009, 22h02

Envoyé par Auteur

jemapo :

euh

Pour la variable chemin c'est a priori juste.... Par contre, tabImg et tabTxt

- tabImg :
Une image a un nom et une extension : le séparateur est le point. Concrètement le nom est de la forme : tonFichier.ext (ext est l'extension).
Dans ton cas tes images doivent avoir un nom du genre : logo.jpg ; scooter.jpg, etc. non ?
Ce sont ces noms que tu dois taper dans tabImg.

- tabTxt : écris simplement du texte....

petite question :
as-tu des bases en HTML et javascript ?

non aucune connaissance

**jemapo** · 11/02/2009, 22h06

Envoyé par Auteur

jemapo :

euh

Pour la variable chemin c'est a priori juste.... Par contre, tabImg et tabTxt

- tabImg :
Une image a un nom et une extension : le séparateur est le point. Concrètement le nom est de la forme : tonFichier.ext (ext est l'extension).
Dans ton cas tes images doivent avoir un nom du genre : logo.jpg ; scooter.jpg, etc. non ?
Ce sont ces noms que tu dois taper dans tabImg.

- tabTxt : écris simplement du texte....

petite question :
as-tu des bases en HTML et javascript ?

je devrai écrire logo.jpg

**jemapo** · 11/02/2009, 22h08

Envoyé par jemapo

je devrai écrire logo.jpg

dans tabImg je devrai écrire logo.jpg

**jemapo** · 11/02/2009, 22h12

Envoyé par Auteur

jemapo :

euh

Pour la variable chemin c'est a priori juste.... Par contre, tabImg et tabTxt

- tabImg :
Une image a un nom et une extension : le séparateur est le point. Concrètement le nom est de la forme : tonFichier.ext (ext est l'extension).
Dans ton cas tes images doivent avoir un nom du genre : logo.jpg ; scooter.jpg, etc. non ?
Ce sont ces noms que tu dois taper dans tabImg.

- tabTxt : écris simplement du texte....

petite question :
as-tu des bases en HTML et javascript ?

ok je teste