Problème infobulle JS sous IE

Problème infobulle JS sous IE - HTML/CSS - Programmation

Marsh Posté le 14-06-2008 à 10:59:11    

Bonjour à tous,
 
Je dispose d'une fonction Javascript pour afficher des images dans une infobulle lorsque la souris passe dessus. Sous Firefox tout fonctionne très bien, mais sous IE l'infobulle ne se dimensionne pas à la taille de l'image, ce qui fait que cette dernière "sort" de l'infobulle. Voici le code JS :
 

Code :
  1. var xOffset=6
  2. var yOffset=5
  4. var affiche = false; // La variable i nous dit si le bloc est visible ou non
  5. var w3c=document.getElementById && !document.all;
  6. var ie=document.all;
  8. if (ie||w3c) {
  9. var laBulle
  10. }
  12. function ietruebody(){ // retourne le bon corps...
  13. return (document.compatMode && document.compatMode!="BackCompat" )? document.documentElement : document.body
  14. }
  16. function deplacer(e) {
  17.    if(affiche){
  18.       var curX = (w3c) ? e.pageX : event.x + ietruebody().scrollLeft;
  19.       var curY = (w3c) ? e.pageY : event.y + ietruebody().scrollTop;
  21.       var winwidth = ie && !window.opera ? ietruebody().clientWidth : window.innerWidth - 20;
  22.       var winheight = ie && !window.opera ? ietruebody().clientHeight : window.innerHeight - 20;
  24.       var rightedge = ie && !window.opera ? winwidth - event.clientX - xOffset : winwidth - e.clientX - xOffset;
  25.       var bottomedge = ie && !window.opera ? winheight - event.clientY - yOffset : winheight - e.clientY - yOffset;
  27.       var leftedge = (xOffset < 0) ? xOffset*(-1) : -1000
  29.        
  30. // modifier la largeur de l'objet s'il est trop grand...
  31.         if(laBulle.offsetWidth > winwidth / 3){
  32.             laBulle.style.width = winwidth / 3
  33.         }
  35. // si la largeur horizontale n'est pas assez grande pour l'info bulle
  36.         if(rightedge < laBulle.offsetWidth){
  37. // bouge la position horizontale de sa largeur à gauche
  38.         laBulle.style.left = curX - laBulle.offsetWidth + "px"
  39.         }
  40.           else {
  41.             if(curX < leftedge){
  42.             laBulle.style.left = "5px"
  43.          }
  44.             else{
  45. // la position horizontale de la souris
  46.               laBulle.style.left = curX + xOffset + "px"
  47.             }
  48.          }
  50. // même chose avec la verticale
  51.        if(bottomedge < laBulle.offsetHeight){
  52.          laBulle.style.top = curY - laBulle.offsetHeight - yOffset + "px"
  53.        }
  54.          else {
  55.           laBulle.style.top = curY + yOffset + "px"
  56.          }
  57.       }
  58.   }
  60. function showTooltip(text) {
  61.      if (w3c||ie){
  62.        laBulle = document.all ? document.all["bulle"] : document.getElementById ? document.getElementById("bulle" ) : ""
  63.        laBulle.innerHTML = text; // fixe le texte dans l'infobulle
  64.        laBulle.style.visibility = "visible"; // Si il est cachée (la verif n'est qu'une securité) on le rend visible.
  65.        affiche = true;
  66.      }
  67. }
  68. function hideTooltip() {
  69.     if (w3c||ie){
  70.        affiche = false
  71.        laBulle.style.visibility="hidden" // avoid the IE6 cache optimisation with hidden blocks
  72.        laBulle.style.top = '-100000px'
  73.        laBulle.style.backgroundColor = ''
  74.        laBulle.style.width = ''
  75.     }
  76. }
  78. document.onmousemove = deplacer; // des que la souris bouge, on appelle la fonction move pour mettre a jour la position de la bulle.


 
J'utilise en suite le code suivant sur mon image en HTML :
 

Code :
  1. <a href="#" onmouseover="showTooltip('<div class=\'info\'><strong>Titre image</strong><br /><img id=\'big\' src=\'images/test.jpg\' width=\'700\'></div>');"
  2.   onmouseout="hideTooltip()"><img class="imgleft" id="big" src="images/test.jpg" width=100 height=60 onmouseout="hideTooltip()" /></a>
  4. <div id="bulle"></div>   // permet d'afficher l'infobulle


 
Et enfin les lignes correspondantes dans ma feuille de style :
 

Code :
  1. img {
  2.   border:none;
  3. }
  4.     #bulle {
  5.        position: absolute; visibility: hidden;  font-size:12px;
  6.      }
  7. .info {
  8.   border:1px solid #666666; padding: 7px; color:#666666; background-color:#FFFFFF; font-family:"trebuchet MS";
  9. }


 
 
Quelqu'un aurait il une une piste pour résoudre le problème ?
 
D'avance merci
 

Reply

Marsh Posté le 14-06-2008 à 10:59:11   

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed