[résolu] Bulle d'information en javascript sous IE

Bonjour a tous, j ai effectué des recherches sur le forum et je n ai malheureusement pas trouvé l information correspondante (l'aurais-je loupé ?...... )

Voila mon soucis : J ai créé une page de galerie de photos.
http://pages.videotron.com/hippoark/plantesmois.html
Sur celle-ci, j ai rajouté un code récupéré dans un tutoriel ; chaque fois que la souris passe sur une des photos, une "bulle d'information" apparait au dessus du curseur. Le code fonctionne très bien sous safari, firefox, camino, opera..... mais sur IE ca ne fonctionne pas correctement. La bulle apparait a la bonne place lors de l ouverterture de la page, mais dès que l on descend avec la barre de défilement, la bulle n apparait plus au dessus du curseur mais en haut de l ecran..... en encore on ne voit que le bas de la bulle. Voici le code :

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-250+"px";
			document.getElementById("bulle").style.left = mouseX-125+"px";
			document.getElementById("bulle").style.visibility = voir;
			document.getElementById("bulle").style.display = display; 
			}
			init();
			function cache(){
				document.getElementById("bulle").style.visibility = "hidden";
			}
			}

et le css correspondant

  <style type="text/css">
<!--
#bulle {
background-color: #e2e59e;
text-align: justify;
border: 1px solid #6d6d0d;
position: absolute;
display:none;
width: 300px;
height: 200px;
font-size:12pt;
line-height: 20px;
font-stretch: semi-expanded;
padding: 5px;
}
-->
  </style>

Y a t il une fonction a modifier, a rajouter ou meme un autre code pour que ca fonctionne correctement ? Je tiens a garder le principe de bulle d'information de maniere a ne pas surcharger visuellement la page.

Merci pour vos reponses.
a+
Modifié par Ark34 (02 Apr 2007 - 23:35)

Bonjour,

Il me semble que pour récupérer la position de souris sur ie ce n'est pas event.x mais window.event.x

essayes de remplacer :

if (navigator.appName.indexOf("Explorer") > -1) {
   var mouseX=event.x; var mouseY=event.y;
}
else {var mouseX=e.pageX; var mouseY=e.pageY;}

par :

if (navigator.appName.indexOf("Explorer") > -1) {
   var mouseX=window.event.x; var mouseY=window.event.y;
}
else {var mouseX=e.pageX; var mouseY=e.pageY;}

Par contre tu n'es pas obligé de verifier le nom du navigateur, tu peux tout simplement verifier le support de l'élement en question par le navigateur, tu as pour cela plusieur solution:

e = e || window.event;
var mouseX=e.pageX; 
var mouseY=e.pageY;

ou

var mouseX=(e)? e.pageX : window.event.x; 
var mouseY=(e)? e.pageY : window.event.y;

sinon pour ne pas repeter a la place de ça:

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

tu peux aussi faire:

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

Une fois que tu as fais ça, il y a aussi un truc sympa que tu peux essayer si t'es un peu aventurier, c'est à la place de ça :

bulle.style.top = mouseY-250+"px";
bulle.style.left = mouseX-125+"px";

mettre:

var windowWidth =  window.innerWidth;
windowWidth = (windowWidth)? windowWidth : document.documentElement.clientWidth;
windowWidth = (windowWidth)? windowWidth : document.body.clientWidth;
var windowHeight =  window.innerHeight;
windowHeight = (windowHeight)? windowHeight: document.documentElement.clientHeight;
windowHeight = (windowHeight)? windowHeight: document.body.clientHeight;

limitX = bulle.offsetWidth;
limitY = bulle.offsetHeight;

bulle.style.left = (((windowWidth-mouseX)-30)<limitX)? mouseX-limitX+"px" : mouseX+12+"px";
bulle.style.top = (((windowHeight-mouseY)-20)<limitY)? mouseScrollY-limitY+"px" : mouseScrollY+18+"px";

cela positionnera ta bulle celon la fenêtre, ça eviteras par exemple qu'elle disparaisse dans le haut de la page ou qu'aparaisse la scrollsbar horizontal.
Modifié par matmat (03 Apr 2007 - 20:14)

Merci beaucoup Matmat !
Ça fonctionne bien .

Seule la dernière partie n affiche plus les bulles, mais pour reste c est impeccable, marci

a+