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> |
Partager