diaporama image et souris active

**amadine** · 12/12/2010, 17h52

bonjour à tou(te)s
je souhaite réaliser un diaporama :
1- Les images défilent automatiquement
2- La souris arrête l image dès q u elle la survol
3-Le diaporama continue là où il s'est arrêté dès que la souris se retire du diaporama
4- Et qu'au click souris sur l image, on passe à l image suivante
pour le moment j ai ce script
entre balise head:

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
<script type="text/javascript">
var promos = new Array();
 
promos[0]='essai_img/img01.jpg';
promos[1]='essai_img/img02.jpg';
promos[2]='essai_img/img03.jpg';
promos[3]='essai_img/img04.jpg';
/*..............ect*/
 
function diaporama(id, liste, numero) 
{
    document.getElementById(id).src = liste[numero];
    numero++;
    if (numero == liste.length) 
		{
		numero = 0;
		}
    timer = window.setTimeout(function() { diaporama(id, liste, numero); },
    2000);
}
function stop(id)
	{
	window.clearTimeout(timer);
	document.getElementById(id).src = promos[3];
	}
</script>

entre balise body:

Code html :

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

1
2
3
4
5
6
7
<div id="diapopromo">
		<div id="promau">
		
	<img name='lui' id='lui' width='420' height='275' src='essai_img/img01.jpg' onmouseout="diaporama('lui', promos, 0);
	" onmouseover="stop('lui');" alt='AAAA'  />
		</div>
	</div>

Problèmes :
1-lorsque souris survol, l image qui s'affiche est promos[3];/ cad toujours la même.
2- quand on click dessus on reviens au point de départ promos, 0);!!!!
3- diapo ne s'active pas automatiquement
Peut on m indiquer ce que je dois changer au niveau de ce script ou me donner référence d'un tuto pour réaliser un diaporama avec ces objectifs
merci à vous
ama

**amadine** · 13/12/2010, 00h29

bonsoir
j a i maintenant un nouveau script qui me permet de faire démarrer /certes/ le diaporama en automat., seulement je ne sais toujours pas comment l'arrêter au survol de la souris, ni comment pouvoir le faire continuer quand la souris ne survol plus le diaporama.
quelqu'un peut il m aider ?
Et est-ce possible toutes ces manipulations ( voir le mss d avant)car là je ne trouve toujours pas!! merci
voici le nouvo script:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style_index/essai02_left.css" type="text/css" media="screen" />
 
<title>test3</title>
<SCRIPT LANGUAGE="JavaScript">
<!--
var timeDelay = 2;
var Pix = new Array
("essai_img/img01.jpg"
,"essai_img/img02.jpg"
,"essai_img/img03.jpg"
,"essai_img/img04.jpg");
 
var howMany = Pix.length;
timeDelay *= 1000;
var PicCurrentNum = 0;
var PicCurrent = new Image();
PicCurrent.src = Pix[PicCurrentNum];
function startPix() {
setInterval("slideshow()", timeDelay);
}
function slideshow() {
PicCurrentNum++;
if (PicCurrentNum == howMany) {
PicCurrentNum = 0;
}
PicCurrent.src = Pix[PicCurrentNum];
document["ChangingPix"].src = PicCurrent.src;
}
 
//  End -->
</script>
<body OnLoad="startPix()">
 
 
	<img name="ChangingPix" src="essai_img/img01.jpg" >
 
 
</body>
 
</html>

diaporama image et souris active

JavaScript

Vue hybride

Discussions similaires

Partager

Partager