Bonjour, je suis en train d'apprendre Javascript, et j'aimerais comprendre ce qui ne marche pas dans mon code.
J'essaie de creer un Tooltip qui se placera a la position de ma souris, et qui fonctionnera sous IE et Firefox. Pour l'instant le mouseover et mouseout fait bien apparaitre et disparaitre le tooltip mais pas a l'endroit(souris x,y) que j'aimerais l'avoir.
Que doit-je modifier?
Merci d'avance!
Voici mon code actuel:
-----
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
document.onmousemove = getMousePos;
var posX=0, posY=0;
function getMousePos(e){
if (document.all) {
posX=event.offsetX;
posY=event.offsetY;
}
else{
posX=e.pageX;
posY=e.pageY;
}
/*document.title=""+posX+", "+posY+")";*/
}
function overBubble(){
document.getElementById("divbubble").style.top=posX;
document.getElementById("divbubble").style.left=posY;
document.getElementById("divbubble").style.display="inline";
}
function outBubble(){
document.getElementById("divbubble").style.display="none";
}
</script>
</head>
<body>
<!-- Bubble Div-->
<div id="divbubble" style="position:absolute; height:50px; width:100px; top:200px; left:200px; background-color:darkred; text-align:center; border: dashed thick red; color: white; padding: 5px; display: none;">
Ceci est un test!...
</div>
<!-- Bubble Div(End)-->
<span onmouseover="overBubble()" onmouseout="outBubble()">Testing... Testing... Testing... Testing... Testing... Testing... Testing... </span>
</body>
</html>