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>
<body>
<form id="form1" runat="server">
<div style="border:1px solid black; width:950px; height:100px; margin-left:auto; margin-right:auto">
Header
</div>
<div class="page">
<div id="sidebarleft">
<div class="onglet200Connection">
</div>
<div class="sousOnglet">
</div>
</div>
<div id="sidebarright">
<div class="onglet200Connection">
</div>
<div class="sousOnglet">
<a href="#"
onmouseover="showTooltip('<div class=\'info\'><strong>Logo de presentation</strong><br />et on peut changer de foto<br /><img id=\'big\' src=\'piece.jpg\'></div>');"
onmouseout="hideTooltip()"><img id="big" src="piece.jpg" onmouseout="hideTooltip()" /></a>
</div>
</div>
<div id="content">
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div class="spacer"></div>
<div class="footer">
Footer
</div>
</div>
</form>
<div id="bulle"></div>
</body>
</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]