Problem info bulle

Signaler
Messages postés
13
Date d'inscription
jeudi 2 mars 2006
Statut
Membre
Dernière intervention
9 janvier 2007
-
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
-
    Salut

J'ai un nouveau probleme qui concerne les infos bulles.
J ai utilisé une méthode qui conciste à créer des bulles grace a un balise qui est visible en passant la souris au dessus d'une image. Mais cette methode marche bien sous IE que lorsque je dis position fixed et sous mozilla lorsque je lui dit position absolute. Alors j ai utilsé plusieurs hack comme .important ou if gte IE 5  mais rien ne marche, pouvez vous m'expliquer pourquoi.

Le probleme ce trouve aussi quand je fais un scroll quand je laisse en fixed l infos bulle ne bouge pas ( ce qui est normal). Dans cette exemple j ai laissé en fixed. Testé en absolute vous allez voir normalement ce bug.

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<link href="style_test.css" rel="stylesheet" type="text/css" />
<!--[if gte IE 7]>

<style type="text/css">
#bulle { position: fixed; }
</style>

<![endif]-->

<script language="JavaScript" type="text/JavaScript">

    function affiche(action,contenu){
            var voir;
            var display;
            if (action == "cache"){
                voir = "hidden";
                display = "none";
            }
            else {
                voir = "visible";
                display = "block";
            }    
            document.getElementById("bulle").innerHTML = contenu;
            function init() {
                document.onmousemove=mousemove;
            }
            function mousemove(e) {
                if (navigator.appName.indexOf("Explorer") > -1) {
                    var mouseX=event.x; var mouseY=event.y;
                }
                else {var mouseX=e.pageX; var mouseY=e.pageY;}

            document.getElementById("bulle").style.top = mouseY+20+"px";
            document.getElementById("bulle").style.left = mouseX+20+"px";
            document.getElementById("bulle").style.visibility = voir;
            document.getElementById("bulle").style.display = display; 
            }
            init();
            function cache(){
                document.getElementById("bulle").style.visibility = "hidden";
            }
            }

</script> 

<link href="stylle_test.css" rel="stylesheet" type="text/css" />
</head>

 J ai volontairement simulé un scroll pour montrer le probleme de l info bulle il faut descendre pour voir l image 

</html>


img {
    color: #0066CC;
    margin-left: 300px;
}

#bulle {
    background-color:#e7eec7;
    position: fixed;
    display:none;
    font-size:11px;
    background-color: #e7eec7;
    border: dashed 1px #93b61a;
    clear: both;
    width: 150px;
    text-align: justify;    
}
.bulle-scroll {
    color: #009999;
    height: 60px;
    width: 700px;
    margin-top: 900px;
}


Merci

5 réponses

Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
14
B
onjour...
c'est un problème classique de récupération des bonnes données sur la position du document
un petit tour sur POSITION DE LA SOURIS DANS LA PAGE aurait été très instructif

la fonction à reprendre est ta fonction mousemove(e), comme ceci par exemple...

  function mousemove(e) {
    var DocRef;
    //-- On traque les hybrides
    if( e && e.target){
      Mouse_X = e.pageX;
      Mouse_Y = e.pageY;
    }
    else{
      if( document.documentElement && document.documentElement.clientWidth)
        DocRef = document.documentElement;
      else
        DocRef = document.body;




      Mouse_X = event.clientX +DocRef.scrollLeft;
      Mouse_Y = event.clientY +DocRef.scrollTop;
    }
  /*
    if (navigator.appName.indexOf("Explorer") > -1) {
      var mouseX=event.x; var mouseY=event.y;
    }
    else {var mouseX=e.pageX; var mouseY=e.pageY;}
  */
    var Obj =  document.getElementById("bulle");
    with( Obj){
      style.top  = Mouse_Y +20 +"px";
      style.left = Mouse_X +20 +"px";
      style.visibility = voir;
      style.display = display;
    }
  }


Il est nécessaire que le DIV Bulle soit en position absolute.
pour plus d'info voir le lien il existe quelques explications...

Have a Good Year...
;0)
Messages postés
13
Date d'inscription
jeudi 2 mars 2006
Statut
Membre
Dernière intervention
9 janvier 2007

Merci pour la reponse je vais tester tout ca
Messages postés
13
Date d'inscription
jeudi 2 mars 2006
Statut
Membre
Dernière intervention
9 janvier 2007

Ton code marche merci, mais j aurais une autre petite question, quand je sors de la zone pour afficher l'infos bulle j'ai un mot "undefined" qui apparait, il apparait a la limite de l'infos bulle. Je me suis demandé si c'etait a cause de la border : none que j ai mis au images, mais ce n est pas ca.
Messages postés
13
Date d'inscription
jeudi 2 mars 2006
Statut
Membre
Dernière intervention
9 janvier 2007

je precise que ce probleme ce produit sur IE 7
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
14
B
onjour...
difficile de répondre comme cela, il faut un lien sur la page pour pouvoir analyser ou le code complet incriminé...

Je dis cela car j'ai trouvé ton code un peu peut orthodoxe...
Mais essaies de mettre quand même, ''</gras>)" src "image.gif" width "60" height = "60" />

;0)