//Il est possible de mettre des balises inline dans l'argument 'infos'
function InfoBule(Element, info, titre){
  global class_titre_bule, class_info_bule, id_div_bule;
 
  Element.onmousemove = updatePosInfoBule();
  formatDatas(id_div_bule, new Array('h4', titre, class_titre_bules), new Array('p', info, class_info_bule));
 
  //On affiche la bule
  showMe(id_div_bule);
 
  window.onscroll = updatePosInfoBule();
}
function updatePosInfoBule() {
  global id_div_bule;
 
  var evenement = arguments[0] ? arguments[0] : window.event;
  var x = evenement.clientX;
  var y = evenement.clientY;
 
  //Variables contenant le décalage de l'infobule par rapport à la souris
  var diffX = 24;
  var diffY = 0;
  document.getElementById(id_div_bule).style.top  = y - 2 + diffY + document.body.scrollTop + 'px';
  document.getElementById(id_div_bule).style.left = x - 2 + diffX + document.body.scrollLeft + 'px';
  document.getElementById(id_div_bule).onmouseout = hideMe(id_div_bule);
}
function init_bules(){
  global id_div_bule, liste_img_bule;
  var bubule = document.getElementById(id_div_bule);
 
  for(var i = 0, taille = liste_img_bule.length; i < taille; i++){
    var img = document.getElementByid(liste_img_bule[i][0]);
    hideMe(img);
    img.onmouseover = InfoBule(liste_img_bule[i][0], liste_img_bule[i][1], liste_img_bule[i][2]);
  }
}


/*
Fonctions annexes
*/
//Fonction utilisant les attributs valides au DOM pour écrire des données dans un document xhtml ou xml
//Les arguments de cette fonction sont implicites. Ce sont des listes sous cete forme :
//['h2', 'Mon super titre', 'class spésificuqe au titre'], [...] ou =
//['p', 'Mon super texte', 'class spécifique au texte'], [...]
//La fonction créera les élements des listes à la suite.
//Il est possible d'insérer des balises inline dans l'index 2 de la liste.
function formatDatas(id) {
  //Pour ie :
  if(document.all){
    var elem = document.all[id];
    elem.innerHTML = null;
    var datas = null;
    for(var i = 1, taille = arguments.length; i < taille; i++){
      var deb = '<'+arguments[i][0]+(typeof arguments[i][2] != 'undefined')?' class='+arguments[i][2]+'>':'>';
      var fin = '</'+arguments[i][0]+'>';
      elem.innerHTML(deb + arguments[i][1] + fin);
    }
  }else{
    //On suprime tous les noeux dans l'info bule.
    var elem = document.getElementById(id);
    var listeElem = elem.childNodes;
    while(elem.hasChildNodes() === true)
      elem.removeChild(listeElem.item(0));
   
    //On récupère les élements des arguments implicites dans une boucle puis on les insères dans elemBule
    for(var i = 1, taille = arguments.length; i < taille; i++){//i = 1 car il y a déjà un argument à la fonction
      var balise = document.createElement(arguments[i][0]);
      var texte = document.createTextNode(arguments[i][1]);
      balise.appendChild(texte);
      if(typeof arguments[i][2] != 'undefined')
          balise.setAttribute('class', arguments[i][2]);
      elem.appendChild(balise);
    }
  }
}
function showMe(id) {
  document.getElementById(id).style.display = 'block';
}
function hideMe(id) {
  document.getElementById(id).style.display = 'none';
}

//# Configuration des infos-bules #//
    //id du div contenant l'info-bule, il doit être vide
var id_div_bule = '';

    //class (pour le css) du titre de l'info
var class_titre_bules = 'titreBule';

    //class (pour le css) du contenu de l'info
var class_info_bule = 'infoBule';

    //Liste des images et des infos bules correspondantes à afficher
var liste_img_bule = new Array();
//Configurer ici
liste_img_bule[0] = new Array('id_image', 'titre_info', 'infos');
liste_img_bule[1] = new Array('id_image2', 'titre_info2', 'infos2');
liste_img_bule[1] = new Array('id_image3', 'titre_info3', 'infos3');
//Etc...

//Configurer ici
liste_img_bule[0] = new Array('id_image', 'titre_info', 'infos');
liste_img_bule[1] = new Array('id_image2', 'titre_info2', 'infos2');
liste_img_bule[1] = new Array('id_image3', 'titre_info3', 'infos3');
//Etc...