plusieurs diapo dans une meme page

Version imprimable

19/11/2008, 23h23
sokebana

plusieurs diapo dans une meme page --- RESOLU

Bonsoir
j'avais mis deux diaporamas simplissimes avec dreamweaver (permutation d'image), seulement cela créait un conflit avec mon menu accordéon...
bon...

je cherche désespérément un diapo simple qui se déclenche au clic ou au survol et surtout où je peux en mettre plusieurs sur la même page

j'ai trouvé ce machin tout simple qui va très bien http://www.jejavascript.net/visionn.php, seulement, ej ne parviens pas à le dupliquer...

alors si qqu voulait bien me donner quelques pistes de résolution ou de diaporama avec des boutons plus classe, ce serait très... sympa...

par avance un grand merci
20/11/2008, 14h26
le_chomeur

va faire un tour ici : http://www.developpez.net/forums/d62...porama-dimage/

la démo : http://easynews.free.fr/mbox/ ;)
20/11/2008, 17h43
sokebana

Bonjour et merci de ton inter, seulement je cherche un dia qui montre seulement et directement la 1er image à sa taille finale (pas de vignette)
pour mieux t'aider à me comprendre voici ce à quoi cela va servir:
http://www.sokebana.net/test/service...oumission.html
ce qui nous intéresse est le 1er bloc avec l'image qui en réalité est un diaporama qui doit impérativement se déclencher au clic ou au survol, ceci car il va y en avoir les un en dessous des autres et si tous les slides sont en auto, ça va être un bazar sans nom visuellement.

alors faire un diapo et le mettre oui je sais faire, mais en mettre plusieurs, non

merci par avance de votre aide à tous

j'ai trouvé ça qui me semble nickel, mais je suis face au meme souci, comment mettre plusieurs diapo ds une mem page html????

merci de votre aide

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
<script language="JavaScript">
<!--
//PLF-http://www.jejavascript.net/
function objet() {
this.length = objet.arguments.length
for (var i = 0; i < this.length; i++) this[i+1] = objet.arguments[i]
}
var nom = new objet ("01.jpg", "02.jpg", "03.jpg", "12.jpg", "16.jpg");
var numero = 1;
function changer() {
numero += 1;
if (numero == nom.length + 1) numero = 2;
document.image.src = ""+nom[numero];
roll=window.setTimeout('changer()',1000)
}
function initial() {
if (numero != 1) numero = 1;
window.clearTimeout(roll);
document.image.src = ""+nom[numero];
}
function prechargimg() {
var doc=document;
if(doc.images){ if(!doc.precharg) doc.precharg=new Array();
var i,j=doc.precharg.length,x=prechargimg.arguments; for(i=0; i<x.length; i++)
if (x[i].indexOf("#")!=0){ doc.precharg[j]=new Image; doc.precharg[j++].src=x[i];}}
}
//-->
</script>
</head>
 
<body onLoad="prechargimg('02.jpg', '03.jpg', '12.jpg', '16.jpg')">
<a href="#" onMouseOut="initial()" onMouseOver="changer()" ><img src="01.jpg" width="400 height="194" border="0" name="image"></a>
</body>

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
 
<!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" />
<title>diapo</title>
<script type="text/javascript">
function diapo(MesImages,cible){
	this.cible = cible;
	this.MesImages = MesImages;
	this.nbImage = MesImages.length;
	this.currentIndex = 0 ;
	this.timer = null;
}
 
diapo.prototype.next = function(){
	var me = this;
	this.currentIndex++;
 
	if (this.currentIndex == (this.nbImage)) this.currentIndex = 0;
	this.cible.src = this.MesImages[this.currentIndex];
	this.timer = setTimeout(function(){me.next();},1000);
}
 
diapo.prototype.reset = function(){
		this.currentIndex = 0;
		clearTimeout(this.timer);
		this.cible.src = this.MesImages[0];
}
</script>
</head>
 
<body>
<a href="#" onmouseover="first.next()" onmouseout="first.reset()">
	<img src="images/pic2.jpg" id="premier"/>
</a>
<a href="#" onmouseover="deux.next()" onmouseout="deux.reset()">
	<img src="images/pic5.jpg" id="second" />
</a>
<script type="text/javascript">
	//création des tableaux d'image + détection de la cible
	var first = new diapo(['images/pic2.jpg','images/pic3.jpg','images/pic4.jpg'],document.getElementById('premier'));
	var deux = new diapo(['images/pic5.jpg','images/pic6.jpg','images/pic7.jpg'],document.getElementById('second'));
</script>
</body>
</html>

22/11/2008, 11h29
sokebana

CA Y EST C'EST TOUT BON

un GRAND merci, c'est excellent c'est vraiment cela que je voulais, je susi enfin libérée de ce .... de diapo... vraiment merci beaucoup pour ton aide

ps: il serait peut etre bon d'indiquer cela quelque part car j'ai cherché deux journée durant et je n'ai pas réussi à trouver la syntaxe pour mettre plusieurs diapo, pour une débutante comme moi c'était infaisable sans ta réponse et sans base en JS
22/11/2008, 12h12
le_chomeur

je t'en pris ce fut avec plaisir ;)
n'oublies pas d'indiquer que ton post est résolu ^^