Script avec fondu dans diaporama
bonjour à tous,
en référence à cette discussion saut d'image avec fondu dans diaporama
Je suis à la recherche d'un script comme on l'a décrit plus haut dans la conversation.
Le tout premier écrit par hellspawn_ludo m'a semblé très bien et fonctionnait parfaitement bien jusqu'au moment où j'ai essayé d'ajouter plus que 3 images...
j'ai cru qu'il suffisait simplement d'ajouter une ligne (en faisant attention à bien incrémenter le "TabImg", mais cela n'a pas fonctionné...
j'ia essayé de chipoter au reste du code pour voir si ca bloquait autre part, mais je suis un peu perdu là, je ne trouve pas la solution qui doit surement être simple.
quelqu'un pourrait-il m'aider?
Pour l'instant, le code de ma page ressemble à ca :
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
| <html>
<head>
<script>
TabImg = new Array;
// Nom des images jouées
TabImg[0] = '01.jpg'
TabImg[1] = '02.jpg'
TabImg[2] = '03.jpg'
TabImg[3] = '04.jpg'
TabImg[4] = '05.jpg'
TabImg[5] = '06.jpg'
num = 0;
function diaporama(divid, imageid, millisec)
{
var speed = Math.round(millisec / 1000);
var timer = 0;
document.getElementById(divid).style.backgroundImage = "url(" + TabImg[num] + ")";
changeOpac(0, imageid);
if (num>1)
{num=-1;}
document.getElementById(imageid).src = TabImg[num+1];
for(i = 0; i <= 100; i++)
{
setTimeout("changeOpac(" + i + ",'" + imageid + "')",(timer * speed));
timer++;
}
num++;
}
function changeOpac(opacity, id)
{
var object = document.getElementById(id).style;
object.opacity = (opacity / 100);
object.MozOpacity = (opacity / 100);
object.KhtmlOpacity = (opacity / 100);
object.filter = "alpha(opacity=" + opacity + ")";
}
//Pour rejouer le diaporama en boucle
var timer=setInterval("diaporama('id_div','id_img',500)",1000);
</script>
</head>
<body>
l'aimage s'affiche ic :
<br /><br />
<div id="id_div" style="background-image: url('01.jpg');background-repeat: no-repeat; width: 250px; height: 250px;">
<img id="id_img" src="" style="width: 250px; height: 250px;background-repeat: no-repeat; border: 0 none; filter: alpha(opacity=0); -moz-opacity: 0; opacity: 0;" />
</div>
</body>
</html> |
