Sujet Précédent Sujet Suivant

Problem info bulle

xiryu Messages postés 13 Date d'inscription jeudi 2 mars 2006 Statut Membre Dernière intervention 9 janvier 2007 - 3 janv. 2007 à 14:59
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 - 9 janv. 2007 à 18:10
    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

Réponse 1 / 5
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
3 janv. 2007 à 18:08
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)
0
Réponse 2 / 5
xiryu Messages postés 13 Date d'inscription jeudi 2 mars 2006 Statut Membre Dernière intervention 9 janvier 2007
4 janv. 2007 à 10:35
Merci pour la reponse je vais tester tout ca
0
Réponse 3 / 5
xiryu Messages postés 13 Date d'inscription jeudi 2 mars 2006 Statut Membre Dernière intervention 9 janvier 2007
9 janv. 2007 à 12:02
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.
0
Réponse 4 / 5
xiryu Messages postés 13 Date d'inscription jeudi 2 mars 2006 Statut Membre Dernière intervention 9 janvier 2007
9 janv. 2007 à 12:06
je precise que ce probleme ce produit sur IE 7
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 5
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
9 janv. 2007 à 18:10
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)
0

Discussions similaires

Info bulle sur bouton
AReS097 -
zoug -

4 réponses
P2P KAZAA OPENFT GNUTELLA ARES
soldier8514 -
yoman64 -

5 réponses
tchat...
jr555555 -
jr555555 -

2 réponses
Chat sur internet
cs_vtvdung -
MorpionMx -

1 réponse
Urgent: Lire info de contact outlook depuis vba
cs_nbenoist -
nbenoist -

3 réponses
Rejoignez-nous