Bonjour, j'ai trouvé le code ci-dessous pour faire fondu entre deux images. Par contre, étant novice en htm, je suis un peu paumé. Comment rendre ce défilement automatique en faisant disparaitre le bouton et la nécéssité de cliquer sur celui-ci pour démarrer le fondu? Merci de votre aide. Voici le code:
<!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" xml:lang="fr-FR" lang="fr-FR">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Fondu enchainé</title>
<style type="text/css">
h1{
text-align: center;
}
#container{
height: 600px;
}
.images{
position: absolute;
top: 5em;
z-index: 0;
}
p{
width: 800px;
text-align: center;
}
</style>
<script type="text/javascript">
var defilement = false;
var Fondu = function(classe_img){
this.classe_img = classe_img;
this.courant = 0;
this.coeff = 100;
this.collection = this.getImages();
this.collection[0].style.zIndex = 100;
this.total = this.collection.length - 1;
this.encours = false;
}
Fondu.prototype.getImages = function(){
var tmp = [];
if(document.getElementsByClassName){
tmp = document.getElementsByClassName(this.classe_img);
}
else{
var i=0;
while(document.getElementsByTagName('*')[i]){
if(document.getElementsByTagName('*')[i].className.indexOf(this.classe_img)>-1){
tmp.push(document.getElementsByTagName('*')[i]);
}
i++;
}
}
var j=tmp.length;
while(j--){
if(tmp[j].filters){
tmp[j].style.width = tmp[j].style.width || tmp[j].offsetWidth+'px';
tmp[j].style.filter = 'alpha(opacity=100)';
tmp[j].opaque = tmp[j].filters[0];
this.coeff = 1;
}
else{
tmp[j].opaque = tmp[j].style;
}
}
return tmp;
}
Fondu.prototype.change = function(sens){
var prevObj = this.collection[this.courant];
if(this.encours){
return false;
}
this.encours = true;
if(sens){
this.courant++;
if(this.courant>this.total){
this.courant = 0;
}
}
else{
this.courant--;
if(this.courant<0){
this.courant = this.total;
}
}
var nextObj = this.collection[this.courant];
nextObj.style.zIndex = 50;
var tmpOp = 100;
var that = this;
var timer = setInterval(function(){
if(tmpOp<0){
clearInterval(timer);
timer = null;
prevObj.opaque.opacity = 0;
nextObj.style.zIndex = 100;
prevObj.style.zIndex = 0;
prevObj.opaque.opacity = 100 / that.coeff;
that.encours = false;
}
else{
prevObj.opaque.opacity = tmpOp / that.coeff;
tmpOp -= 5;
}
}, 25);
}
function defil(){
var boutons = document.getElementsByTagName('input');
if(defilement){
clearInterval(defilement);
defilement = false;
boutons[1].value = 'Défilement automatique';
}
else{
monFondu.change(true);
defilement = setInterval(function(){monFondu.change(true);},2000);
boutons[1].value = 'Stopper le défilement';
}
boutons[0].disabled = !boutons[0].disabled;
boutons[2].disabled = !boutons[2].disabled;
}
</script>
</head>
<body onload="window.monFondu = new Fondu('images')">
<h1>Galerie avec effet de fondu</h1>
<div id="container">
<img class="images" src="IMAGE1.JPG" alt="Image" style="z-index:100" />
<img class="images" src="IMAGE2.JPG" alt="Image" />
<img class="images" src="IMAGE3.JPG" alt="Image" />
<img class="images" src="IMAGE4.JPG" alt="Image" />
</div>
<p><input type="button" value="<<" onclick="monFondu.change(false);" /><input type="button" value="Défilement automatique" onclick="defil()" /><input type="button" value=">>" onclick="monFondu.change(true);" /></p>
</body>
</html>
