Bonjour, je souhaite créer une infobulle au passage de la souris sur une image.
Sur Firefox le resultat est OK, une div se crée à coté de l'image avec ses caracteristiques et son texte.
Par contre sous IE, seul le texte apparait en dehors de mon body (la div avec sa taille, border, color n'apparaissent pas)
j'appelle dans mon
fichier php le javascript comme ceci:
- startAideLigne fait apparaitre la bulle
- aideLigne fait un suivi de la souris
- stopAideLigne enleve la bulle
<div id="installNameBase" name="installNameBase" style="float:left";
<img src="../image/icon/ampoule.png"
onMouseOver="startAideLigne(event,this);"
onMouseMove="aideLigne(event);"
onMouseOut="stopAideLigne();"/>
</div>
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// ensuite dans mon
fichier jsfunction getEl(id) {
return document.getElementById(id);
}
var valX;
var valY;
var ecartX;
var ecartY;
var draging = false;
var monElAide = null;
function getMouse(e) // fonction pour récuperer les coordonées du curseur
{
valX = e.clientX;
valY = e.clientY;
}
function startAideLigne(e,el) { // affiche la bulle d'aide
var monDiv = document.createElement('DIV');
var nom = el.getAttribute('id');
var body = document.getElementsByTagName('BODY')[0];
draging = true;
monDiv.setAttribute('style', 'position:absolute; width:200px; border:solid 1px black; background-color:yellow;');
monDiv.setAttribute('id', 'aide' + nom);
monDiv.innerHTML = appelAide(nom); //appelAide() renvoie le contenu de la bulle
body.appendChild(monDiv);
getMouse(e);
monDiv.style.top = valY - parseInt(monDiv.offsetHeight) - 5 + "px";
monDiv.style.left = valX + 5 + "px";
ecartY = valY - parseInt(monDiv.offsetTop);
ecartX = valX - parseInt(monDiv.offsetLeft);
monElAide = monDiv;
}
function aideLigne(e) { // pour gérer le déplacement de la bulle d'aide par rapport au curser
var valX2=0;
var body = document.getElementsByTagName('BODY')[0];
if(draging == true)
{
getMouse(e);
if(valX>(parseInt(body.offsetWidth)-parseInt(monElAide.offsetWidth))){
valX2 = valX - parseInt(monElAide.offsetWidth) - 10;
}
else{
valX2 = valX;
}
monElAide.style.left = valX2 - ecartX + "px";
monElAide.style.top = valY - ecartY + "px";
}
}
function stopAideLigne() { // pour enlever la bulle d'aide
draging = false;
monElAide.parentNode.removeChild(monElAide);
}
Voilà, j'espere avoir été clair dans mon soucis d'affichage IE.
Merci d'avance pour vos reponses.