function nbcoul(elem,ima){

 this.inter=null,
 this.bb=1
 this.imacibleb=null
 this.conte=document.getElementById(elem)
 this.ima=ima
 var that=this
 
 ///////////////////////////
 //partie fading /////////
 //////////////////////////

 this.nbsta=function(){
  
  clearInterval(that.inter)
  that.inter=setInterval(that.nbfadec,25);
 }

 this.nbsto=function(){
  
  clearInterval(that.inter)
  that.inter=setInterval(that.nbfaden,25);
 }

 this.nbfadec=function() {

  that.imacibleb.style.opacity = that.bb;
  that.bb+=0.1
  if(that.bb>1){
   clearInterval(that.inter)
   return false
  }
 }

 this.nbfaden=function() {

  that.imacibleb.style.opacity = that.bb;
  that.bb-=0.1
  if(that.bb<0){
   clearInterval(that.inter)
   return false
  }
 }
 this.nb()
}

////////////////////////////////////////////////
//partie creation de l'image en noir et blanc//
//////////////////////////////////////////////

nbcoul.prototype.nb = function() {

 var moncanvas2=document.createElement('canvas');  //creation d'un canvas a l'interieur d'une variable local
 var moncanvas2d=moncanvas2.getContext('2d');
 var that=this
 
 var ima = new Image();  //prechargement de l'image a visualisé
 ima.src = this.ima;
 ima.onload = function () {
  
  moncanvas2.width=ima.width;  //le canvas prend la taille de l'image
  moncanvas2.height=ima.height;
  moncanvas2d.drawImage(ima,0,0);  //on dessine l'image dans le canvas
  
  var largeur=ima.width;
  var hauteur=ima.height;
  var idata = moncanvas2d.getImageData( 0, 0, largeur, hauteur); //on recupere les donnés brute de l'image
  var data = idata.data;
  
  for(var i = 0; i < data.length; i+=4){  //traitement des pixels afin de cree l'image en noir et blanc
   var r = data[i];
   var g = data[i+1];
   var b = data[i+2];
   var noireblanc = (r+g+b)/3;
   data[i] = noireblanc;
   data[i+1] = noireblanc;
   data[i+2] = noireblanc;
  }
  
  idata.data = data;
  moncanvas2d.putImageData(idata, 0, 0);  //on redessine l'image dans le canvas
  
  that.conte.style.height=hauteur+"px"
  that.conte.style.width=largeur+"px"
  
  var base64 = moncanvas2.toDataURL("image/jpg");  //on converti en jpg l'image que l'on enregistre dans une variable
  var construction=document.createElement('img');  //on cree une balise image et on lui donne comme src la variable contenant l'image
  construction.src=base64;
  construction.style.position="relative"
  construction.style.marginTop=-hauteur+"px"
  construction.style.opacity=1
  construction.onmouseout=that.nbsta
  construction.onmouseover=that.nbsto
  that.imacibleb=that.conte.appendChild(construction);
 }
}

window.addEventListener('load', init, false);
function init(){   //nom des image

 var tbmage=new Array('grenouille.jpg','papillon.jpg','papillon2.jpg','papillon3.jpg','lezard.jpg','lezard2.jpg','iguane.jpg','houe.jpg')
 
 var chemin='images/'  // chemin des images

 for(var i = 0; i < tbmage.length; i++){
  new nbcoul('divgem'+i,chemin+tbmage[i]);  //creation d'instance le nom de chaque div est precisé ainsi que le chemin de chaques images en relation avec le div
 }
}