Défilement de textes et d'images
Citation:
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
je suis perdu voici ma page
Citation:
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
et tes images dans
Code:
mon site web/theorecreo/image/diaporama/
il faut :
Code:
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:
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"> </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 voici ce que je veu faire
Citation:
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:
<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
il y a juste une affaire qui ne fonctio0nne pas
Citation:
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:
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:
<body onload="creationDiaporama()" onunload="stopDiaporama()">
puis dans ta page le div qui contient le diaporama :
Code:
<div class="conteneur" id="conteneur"></div>
ensuite pour avoir un cadre de 160px * 160px regarde la partie CSS et repère ces lignes :
Code:
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
