défilement d'images avec arrêt du défilement si survol

**laurentSc** · 29/04/2010, 21h56

Bonjour,

j'avais utilisé un code de "Auteur" (pseudo) qui fait un défilement d'images, mais je souhaite aussi que le défilement s'arrête si on survole l'image et reprenne si on s'en va. Connaissant un peu le js, j'ai pû le faire sur le code de base, mais ça marche mal sur le code un peu plus élaboré que j'utilise (en gros, si la souris s'enlève du mot et qu'on survole l'image moins de une seconde après (

Code :

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

waiting=setTimeout("stop(image)", 1*1000);

)), le défilement s'arrête, mais si le souris s'éloigne, il ne reprend pas.
Sachant qu'il y a environ 300 lignes de code, je ne sais pas si ce serait une bonne solution de le mettre sur le forum. J'ai mis tout le code dans un zip que je mets en pièce attachée.
Si quelqu'un prend le temps de regarder, ça me rendrait beaucoup service.

**laurentSc** · 29/04/2010, 23h32

Comme je m'attends à ce qu'on me demande plutôt le code, je le donne en rajoutant des commentaires pour expliciter, mais il y en a beaucoup :
code html :

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
<head>
  <title></title>
  <meta http-equiv="Content-type"
 content="application/xhtml+xml; charset=ISO-8859-1">
  <meta http-equiv="Content-Language" content="fr">
  <link rel="stylesheet" type="text/css"
 href="exemplecar/exemple.css">
  <script type="text/javascript" src="exemplecar/exemple.js"></script>
</head>
<body onload="creationDiaporama()" onunload="stopDiaporama()">
<div class="conteneurch" id="conteneurch"> </div> <!-- il y a 2 images défilantes, donc 2 conteneurs -->
<div class="conteneurcar" id="conteneurcar"> </div>
<div> 
bla bla bla bla bla bla bla <span onmouseover="afficher(this,'car')"
 onmouseout="cacher(this,'car')"
 style="font-weight: bold; color: rgb(0, 0, 255); cursor: pointer;">Passe
la souris ici (carriere) :D</span> <!-- gestion de la 1e image défilante : pour 
les 2, un span et sur onmouseover, 
on lance la fonction js "afficher" et sur onmouseout la fontion "cacher"-->
bla bla bla bla bla bla bla 
 <br>
<span onmouseover="afficher(this,'ch')"
 onmouseout="cacher(this,'ch')"
 style="font-weight: bold; color: rgb(0, 0, 255); cursor: pointer;">Passe
la souris ici (carriere) :D</span>
</div>
</body>
</html>

Code js (il y a le code de Auteur avec quelques modifs de débutant, mais qui marchent (elles sont bien préalables à ma tentative de modif) :

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
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
/* code optimisé pour 2 bandeaux */
/* 
chemin => chemin relatif des images
tabImg => nom des images
tabTxt => légende des images
*/
 
/* ci-après, les 2 tables contenant les noms des photos */
var chemincar = "exemplecar/";
var tabImgcar = new Array("Photos_2009_chevaux_+divers_12610.jpg","Photos_2009_chevaux_+divers_13310.jpg","Photos_2009_chevaux_+divers_1341075bonnetaille.jpg");
var tabTxtcar = new Array("","","");
 
var cheminch = "exemplech/";
var tabImgch = new Array("Photos_2009_chevaux_+divers_04310.jpg","Photos_2009_chevaux_+divers_04210.jpg","Photos_2009_chevaux_+divers_0441075bonnetaille.jpg","Photos_2009_chevaux_+divers_04510.jpg");
var tabTxtch = new Array("","","","");
 
var attente = "2000"; //délai d'affichage d'une image en ms
 
 
/*********************************************************/
//***** Fonctions du diaporama *****//
var tempo = "1";
var pas = 10;
var chrono;
var posFin, conteneurimg, conteneurcar,conteneurch,sens;
var waiting;
var img;
var obj;
 
 
 
 
function creationDiaporama()
{
 
img='car';
creationDiaporama2();
img='ch';
creationDiaporama2();
}
function creationDiaporama2()
{
 
	var i;
	var imgDiapo, txtDiapo, crlf;
 
	clearTimeout(waiting);
	if (img=='car')
	    var conteneurcar = document.getElementById("conteneurcar");
	else
        var conteneurch = document.getElementById("conteneurch"); 
 
    if (img=='car') {
	    conteneurimg=conteneurcar; 
		tabImg = tabImgcar;
		tabTxt = tabTxtcar;
		chemin = chemincar;
/* mise d'une fonction sur onmouseover et d'une sur onmouseout */
/* la première marche, mais pas la deuxième (pourtant, elle est appelée */
		conteneurcar.onmouseover=fctonmouseover;
		conteneurcar.onmouseout=fctonmouseout;
		}
	else {
	    conteneurimg=conteneurch;
        tabImg = tabImgch;	
		tabTxt = tabTxtch;
        chemin = cheminch;
		conteneurch.onmouseover=fctonmouseover;
		conteneurch.onmouseout=fctonmouseout;		}	
 
 
	// Création du tableau contenant les élements
	var elTable = document.createElement("table");			
	// Ajout d'une ligne dans ce tableau
	var elLigne = elTable.insertRow(-1);
	var elCell;
 
	if (img=='car')	
		{ elTable.style.width = parseInt(conteneurcar.clientWidth * tabImg.length) + "px"; }
	else
		{ elTable.style.width = parseInt(conteneurch.clientWidth * tabImg.length) + "px"; }
	elTable.cellSpacing = "0";
	elTable.cellPading = "0";
 
	for (i=0; i<tabImg.length; i++)
	{
		// Création du noeud image
		imgDiapo = document.createElement("img");
		imgDiapo.src = chemin+tabImg[i];
		imgDiapo.className = "image";
 
		// Création du saut de ligne
		crlf = document.createElement("br");
 
		// Création du noeud texte
		txtDiapo = document.createTextNode(tabTxt[i]);
 
		// Création de la cellule contenant les objets
		elCell = elLigne.insertCell(i);
		elCell.className = "cellule";
		elCell.id = "cellule"+i;
		elCell.objetCellule = elCell;
		elCell.onclick = function(){clicSurImage(this.objetCellule);}
 
		// Ajout des éléments dans la cellule
		elCell.appendChild(imgDiapo);
		elCell.appendChild(crlf);
		elCell.appendChild(txtDiapo);
	}
 
	// Ajout du tableau dans le div conteneurcar
	   if (img=='car')
	      conteneurcar.appendChild(elTable);
	   else 	  
	      conteneurch.appendChild(elTable);
	//chrono = setTimeout("deroulecar()",attente);
 
} 
 
 
// Détermination du sens de défilement des images et des distances à parcourir
function deroule(img)
{
    if (img=='car') {
	    conteneurimg=conteneurcar; 
		tabImg = tabImgcar;
		tabTxt = tabTxtcar;
		chemin = chemincar;}
	else {
	    conteneurimg=conteneurch;
        tabImg = tabImgch;	
		tabTxt = tabTxtch;
        chemin = cheminch;		}
 
	var distance;
 
	if (img=='car') {
	   conteneurcar = document.getElementById("conteneur"+img);
	   distance = conteneurcar.scrollWidth / tabImg.length;
	   if (conteneurcar.scrollLeft + distance >=conteneurcar.scrollWidth)
	    {
		sens = -1;
	    }
 
	   if (conteneurcar.scrollLeft<distance)
	   {
		sens = 1;
	   }
	    posFin = conteneurcar.scrollLeft + sens * distance;
	   }
	else {
	   conteneurch = document.getElementById("conteneur"+img);
	   distance = conteneurch.scrollWidth / tabImg.length;
	   if (conteneurch.scrollLeft + distance >=conteneurch.scrollWidth)
	    {
		sens = -1;
	    }
 
	   if (conteneurch.scrollLeft<distance)
	   {
		sens = 1;
	   }
	   posFin = conteneurch.scrollLeft + sens * distance;
	   }
 
	chrono = setTimeout(function(){defileImage(img);}, tempo);
}
 
 
 
// Défilement des images
function defileImage(img)
{
    if (img=='car') {
	    conteneurimg=conteneurcar; 
		tabImg = tabImgcar;
		tabTxt = tabTxtcar;
		chemin = chemincar;
	    conteneurcar.scrollLeft = conteneurimg.scrollLeft + sens * pas;	}
	else {
	    conteneurimg=conteneurch;
        tabImg = tabImgch;	
		tabTxt = tabTxtch;
        chemin = cheminch;
	    conteneurch.scrollLeft = conteneurimg.scrollLeft + sens * pas;			}
 
 
	if (sens == 1)
	{
		if (conteneurimg.scrollLeft<posFin)
			chrono = setTimeout(function(){defileImage(img);}, tempo);
		else
			chrono = setTimeout(function(){deroule(img);},attente);
	}
	else
	{
		if (conteneurimg.scrollLeft>posFin)
			chrono = setTimeout(function(){defileImage(img);}, tempo);
		else
			chrono = setTimeout(function(){deroule(img);},attente);
 
	}
 
}
 
 
function stopDiaporama()
{
stopDiaporama2('ch');
stopDiaporama2('car');
}
 
// Réinitialisation du diaporama lors de la fermeture de la page
function stop(image) 
{
obj.style.color = "#0000FF";
clearTimeout(chrono);
document.getElementById("conteneur"+image).style.visibility = "hidden";
 
}
function stopDiaporama2(img)
{
	clearTimeout(chrono);
	document.getElementById("conteneur"+img).scrollLeft = 0;
}
 
 
 
 
 
function afficher(objSpan,img)
{
	objSpan.style.color = "#FF0000";
	document.getElementById("conteneur"+img).style.visibility = "visible";
	chrono = setTimeout(function(){deroule(img);},attente);
 
}
 
function cacher(objSpan,img)
{
	//objSpan.style.color = "#0000FF";
	//document.getElementById("conteneur"+img).style.visibility = "hidden";
	image=img;
	obj=objSpan;
	waiting=setTimeout("stop(image)", 1*1000); 
 
	//clearTimeout(chrono);
}
 
function fctonmouseover() {
	clearTimeout(waiting);
	clearTimeout(chrono);
}
 
function fctonmouseout() {
	chrono = setTimeout("deroule()",attente);
}

code CSS:

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
/* div conteneur et cellule du tableau de même longueur */
.conteneurcar, .cellule,.conteneurch{
	width: 350px;	/* valeur modifiable ;-) /!\ entrer une valeur en pixel /!\ */
}
 
/* Le conteneur s'adapte en hauteur (height). Il n'est pas nécessaire de préciser sa hauteur */
.conteneurcar,.conteneurch{
	border: 0px #AAAAAA ridge;	/* bordure du conteneur */
	overflow: hidden;						/* on cache les barres de défilement */
	padding: 0px;								/* pas de marge intérieure */
	top: 25%;
	visibility: hidden;
	position: absolute;
}
 
.conteneurcar{
	left:50%; /* ces 2 paramètres positionnent le bandeau défilant */
}
 
.conteneurch{
	left: 50%; /* ces 2 paramètres positionnent le bandeau défilant */
}
 
/* proprités de la cellule (contient le texte et l'image) */
.cellule{
	text-align: center;					/* alignement des composants dans la cellule */	
	vertical-align: middle;
	border: none;
	cursor: pointer;						/* curseur en forme de main */
 
	/* propriétés du texte dans la cellule */
	color: #000000;								
	font-family: Comic Sans MS;
	font-size: 12pt;
	background-color: #FFFFFF;
}
 
/* propriétés de l'image contenue dans la cellule */
.image{
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
	margin-bottom: 2px;
	height: 230px;							/* taille de l'image */
	width: 307px;	
}

défilement d'images avec arrêt du défilement si survol

JavaScript

Discussions similaires

Partager

Partager