Bonjour à tous, voila j'ai programmé un diaporama en JavaScript qui fonctionne mais je cherche à le faire stopper quand l'utilisateur passe sa souris dessus.

    Mon problème est qu'entre chaque diapo il y a un passage au noir régis grâce à un setTimeOut. A la fin du temps la div passe au noir et au nouvel intervalle elle reviens comme avant. Avec un clearInterval, cela stop le défilement des images mais n'enlève pas le time out ce qui fait que ma div reste noire:  ma div:

  <div id="photo_presentation"></div>

mon script:

  function Shadow_diaporama(width, height, of, to, id, gradient)
{
   var element = document.getElementById(id);
   if (of < to && of >=0 && of <= 10){
      var timer = setInterval(function(){
         var opacity_of = of/10;
         element.style.boxShadow = "inset "+width+"px "+height+"px "+gradient+"px rgba(0, 0, 0, "+opacity_of+")";
         element.style.MozBoxShadow = "inset "+width+"px "+height+"px "+gradient+"px rgba(0, 0, 0, "+opacity_of+")";
         element.style.WebkitBoxShadow = "inset "+width+"px "+height+"px "+gradient+"px rgba(0, 0, 0, "+opacity_of+")";
         if(to <= of){clearInterval(timer)}
         else{
            of = of + 0.5;
         }
      },50);
   }
   else if (to < of && to >=0 && to <= 10){
      var timer = setInterval(function(){
         opacity_of = of/10;
         element.style.boxShadow = "inset "+width+"px "+height+"px "+gradient+"px rgba(0, 0, 0, "+opacity_of+")";
         element.style.MozBoxShadow = "inset "+width+"px "+height+"px "+gradient+"px rgba(0, 0, 0, "+opacity_of+")";
         element.style.WebkitBoxShadow = "inset "+width+"px "+height+"px "+gradient+"px rgba(0, 0, 0, "+opacity_of+")";
         if(to >= of){clearInterval(timer)}
         else{
            of=of - 0.5;
         }
      }, 50);
   }
}
function Diaporama(image_one, image_two, image_three, image_four, image_five, image_six, image_seven){
   var element = document.getElementById('photo_presentation');
   element.style.backgroundImage = 'url('+image_one+')';
   setTimeout("Shadow_diaporama(900, 240, 0, 10, 'photo_presentation', 0)", 4000);
   var i = 0;
   var timer_diaporama = setInterval(function(){
   Shadow_diaporama(900, 240, 10, 0, 'photo_presentation', 0);
   if(i == 0){
      element.style.backgroundImage = 'url('+image_two+')';
      i++;
   }
   else if(i == 1){
      element.style.backgroundImage = 'url('+image_three+')';
      i++;
   }
   else if(i == 2){
      element.style.backgroundImage = 'url('+image_four+')';
      i++;
   }
   else if(i == 3){
      element.style.backgroundImage = 'url('+image_five+')';
      i++;
   }
   else if(i == 4){
      element.style.backgroundImage = 'url('+image_six+')';
      i++;
   }
   else if(i == 5){
      element.style.backgroundImage = 'url('+image_seven+')';
      i++;
   }
   else if(i == 6){
      element.style.backgroundImage = 'url('+image_one+')';
      i = 0;
   }
      setTimeout("Shadow_diaporama(900, 240, 0, 10, 'photo_presentation', 0)", 4000);
   }, 5000);
}

[résolu]
J'ai décalé juste l'image et non le dégradé