Bonjour,

Je cherche à réaliser un petit diaporama en javascript de 2 à 6 photos suivant les annonces.

Le principe étant d'avoir les images en miniatures (entre deux et 6) et en dessous le diaporama qui défilerait en continue (avec fondu).

Pour cela j'ai bien trouvé plusieurs sources qui fonctionnent parfaitement :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html <html xmlns="http://www.w3.org/1999/xhtml">
<head> 
<script>
 
tbimage=new Array('bateau','peli','bateau2','dauphin','crabe','oiseau') //tableau des image mettre le nom de toutes les images
preImages=new Array
var opaa=0;
var opab=100;
var compteur=2
var vitesse=2000
 
function precharge() { 
  for (i = 0; i < tbimage.length; i++) { 
    preImages[i] = new Image()
    preImages[i].src = 'images/'+tbimage[i]+'.jpg'
}
setTimeout(defilmage,vitesse);
}
 
function defilmage(reg){
oxo=reg;
if(compteur==tbimage.length-1){
compteur=-1
}
if(oxo==1){
compteur++
opaa=10;
document.getElementById('divimageb').src="images/"+tbimage[compteur]+".jpg";
oxo=0;
}
var imacibleb=document.getElementById('divimagea');
var imaciblea=document.getElementById('divimageb');
 
opaa+=3;
opab-=4;
if(document.all && !window.opera){ 
imaciblea.style.filter = 'alpha(opacity=' + opaa + ');' ;
imacibleb.style.filter = 'alpha(opacity=' + opab + ');';
} 
else{ 
imaciblea.style.opacity = opaa/100;
imacibleb.style.opacity = opab/100;
}
if(opaa>=100){
opaa=10;
opab=100;
var xcc=imaciblea.src.length-4
var cxx=imaciblea.src.lastIndexOf("/")+1
var nomimg=imaciblea.src.substring(cxx,xcc)
imacibleb.src='images/'+nomimg+'.jpg'
setTimeout("defilmage(1)",vitesse);
return false
}
setTimeout("defilmage()",25);
}
if(navigator.appName.substring(0,3)=="Mic"){
attachEvent("onload",precharge);
}
else{
addEventListener("load", precharge, false);
}
</script>
</head>
<body>
<img src="images/bateau.jpg" />
<img src="images/peli.jpg" />
<img src="images/bateau2.jpg" /><br />
<img src="images/dauphin.jpg" />
<img src="images/crabe.jpg" />
<img src="images/oiseau.jpg" />
 
<br />
<br />
<div id="divconteneur"STYLE="position:relative;top:150px;left:50px;">
<img id='divimagea' src="images/bateau.jpg" STYLE="position:absolute;width:15em;height:15em;opacity:100;FILTER:alpha(opacity=100)">
<img id='divimageb'src="images/peli.jpg" STYLE="position:absolute;width:15em;height:15em;opacity:0;FILTER:alpha(opacity=0)">
</div>
 
</body>
</html>
Par contre j'aimerai surtout au rollover sur une miniature au dessus, que l'image s'affiche dans le diaporama et que celui ci reprenne à cette image.

Mais là j' n'y arrive pas du tout...

Si quelqu'un avait une idée pour réaliser ce genre de chose...

Merci beaucoup d'avance pour votre aide !