Décalage Infobulle sur IE [Résolu]

Signaler
Messages postés
11
Date d'inscription
samedi 25 novembre 2006
Statut
Membre
Dernière intervention
9 décembre 2008
-
Messages postés
11
Date d'inscription
samedi 25 novembre 2006
Statut
Membre
Dernière intervention
9 décembre 2008
-
Bonjour,
Avant toute chose je code en aspx mais j'ai du récupérer un script qui permet de charger une image dans un infobulle.
Sur Mozilla aucun souci le problème viens de IE je m'explique.

Sur une page sans masterpage IE répond correctement, par contre si j'utilise un masterpage l'infobulle se décalle.

Pour comprendre mieux le problème voici les liens test.

Page sans masterpage : http://www.boolo.fr/test.aspx

Page avec masterpage : http://www.boolo.fr

voici le code de la masterpage le CSS ainsi que le fichier javascript.

Merci d'avance de votre aide car niveau javascript je ne suis pas vraiment au top.

[CODE]
<%@ Master Language="VB" CodeFile="test.master.vb" Inherits="test" %>

<!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 id="Head1" runat="server">
    <title></title>
    <script type="text/javascript" language="javascript" src="js/infobulle.js"></script>
</head>

    <form id="form1" runat="server">
   

    Header
   
   
   

   

       

       

       

       
       

   

   

       

       

       
       
    [# ]
       

   

   

       
       
       
   

   

   

    Footer
   

   

    </form> 

 

</html>
[\CODE]

[CODE]
img
{
    border:none;
}

#bulle
{
    position: absolute;
    visibility: hidden; 
    font-size:12px;
}

.info
{
    border:1px solid #666666;
    padding: 2px;
    color:#666666;
    background-color:#FFFFFF;}
[\CODE]
[CODE]
var xOffset=6
var yOffset=5

var affiche = false; // La variable i nous dit si le bloc est visible ou non
var w3c=document.getElementById && !document.all;
var ie=document.all;

if (ie||w3c) {
var laBulle
}

function ietruebody(){ // retourne le bon corps...
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function deplacer(e) {
if(affiche){
var curX = (w3c) ? e.pageX : event.x + ietruebody().scrollLeft;
var curY = (w3c) ? e.pageY : event.y + ietruebody().scrollTop;

var winwidth = ie && !window.opera ? ietruebody().clientWidth : window.innerWidth - 20;
var winheight = ie && !window.opera ? ietruebody().clientHeight : window.innerHeight - 20;

var rightedge = ie && !window.opera ? winwidth - event.clientX - xOffset : winwidth - e.clientX - xOffset;
var bottomedge = ie && !window.opera ? winheight - event.clientY - yOffset : winheight - e.clientY - yOffset;

var leftedge = (xOffset < 0) ? xOffset*(-1) : -1000

// modifier la largeur de l'objet s'il est trop grand...
if(laBulle.offsetWidth > winwidth / 3){
laBulle.style.width = winwidth / 3
}

// si la largeur horizontale n'est pas assez grande pour l'info bulle
if(rightedge < laBulle.offsetWidth){
// bouge la position horizontale de sa largeur à gauche
laBulle.style.left = curX - laBulle.offsetWidth + "px"
} else {
if(curX < leftedge){
laBulle.style.left = "5px"
} else{
// la position horizontale de la souris
laBulle.style.left = curX + xOffset + "px"
}
}

// même chose avec la verticale
if(bottomedge < laBulle.offsetHeight){
laBulle.style.top = curY - laBulle.offsetHeight - yOffset + "px"
} else {
laBulle.style.top = curY + yOffset + "px"
}
}
}
function showTooltip(text) {
if (w3c||ie){
laBulle = document.all ? document.all["bulle"] : document.getElementById ? document.getElementById("bulle") : ""
laBulle.innerHTML = text; // fixe le texte dans l'infobulle
laBulle.style.visibility = "visible"; // Si il est cachée (la verif n'est qu'une securité) on le rend visible.
affiche = true;
}
}
function hideTooltip() {
if (w3c||ie){
affiche = false
laBulle.style.visibility="hidden" // avoid the IE6 cache optimisation with hidden blocks
laBulle.style.top = '-100000px'
laBulle.style.backgroundColor = ''
laBulle.style.width = ''
}
}

document.onmousemove = deplacer; // des que la souris bouge, on appelle la fonction move pour mettre a jour la position de la bulle.
[\CODE]

3 réponses

Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
13
Après un frugal petit déjeuner et une analyse du
script il te faut remplacer...
var curX = (w3c) ? e.pageX : event. x +
ietruebody().scrollLeft;
var curY = (w3c) ? e.pageY : event.y + ietruebody().scrollTop;
par
var curX = (w3c) ? e.pageX : event. clientX + ietruebody().scrollLeft;
var curY =
(w3c) ? e.pageY : event.clientY +
ietruebody().scrollTop;

;O)
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
13
Bonjour,
difficile à dire à brute mais je te
conseil de regarder

INFO
BULLE COMPATIBLE SELECT ET DOCTYPE

ou
encore pour la position de la souris
POSITION DE LA SOURIS DANS LA PAGE

;O)
Messages postés
11
Date d'inscription
samedi 25 novembre 2006
Statut
Membre
Dernière intervention
9 décembre 2008

Merci à toi !

en effet tout tourne correctement avec ta modif.

Cool merci encore !