Bonjour,
je sèche depuis presque 2 jours sur ce script tout bête, adapté d'une source que j'ai pompé je-ne-sais-plus-où...
Il est sensé afficher une "bulle d'aide" (une div) qui suit la souris quand elle survole un objet particulier (ici j'ai mis un lien).
Donc pour résumer : je survole, la div apparait et suit la souris, je quitte la zone, la div disparaît.
Rien de bien sorcier jusque là. Le problème c'était de savoir pourquoi dans MA page, la div apparaît, mais au lieu de se positionner près du curseur, elle reste à sa position originale. La console d'erreurs de Firefox (seul navigateur testé pour le moment) m'affiche les erreurs qui seréfèrents aux lignes 36 et 37 de mon code :
Avertissement : Erreur d'analyse de la valeur pour la propriété « left ». Déclaration abandonnée.
Avertissement : Erreur d'analyse de la valeur pour la propriété « top ». Déclaration abandonnée.
J'ai isolé le code qui pose problème pour y voir plus clair :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr_FR" lang="fr_FR">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type"/>
<title>Help !</title>
<style type="text/css">
#infobulle { position: absolute;
visibility: hidden;
border: 1px solid #CCCCCC;
padding: 10px;
background-color: Yellow;
}
</style>
<script language="javascript" type="text/javascript">
document.onmousemove = get_mouse;
/**
* Récupère les corrdonnées de la souris et les affecte à la bulle
*/
function get_mouse(e) { var x = y = 0;
if(e.pageX || e.pageY) { x = e.pageX;
y = e.pageY;
}
else{ x = event.x;
y = event.y;
}
var padding = 5;
var bubble = document.getElementById("infobulle"); bubble.style.left = x + padding;
bubble.style.top = y + padding;
}
/**
* Affiche la bulle
*/
function see_bubble(text) { var bubble = document.getElementById("infobulle"); bubble.style.visibility = "visible";
bubble.style.display = "block";
bubbleLength = bubble.firstChild.length;
bubble.firstChild.replaceData(0, bubbleLength, text);
}
/**
* Cache la bulle
*/
function kill_bubble() { var bubble = document.getElementById("infobulle"); bubble.style.visibility = "hidden";
bubble.style.display = "none";
}
</script>
</head>
<body>
<div id="infobulle"> </div>
<div style="text-align:center">
<a href="#" onmouseover="see_bubble('Le texte de ma bulle...');" onmouseout="kill_bubble();">Un lien...</a></div>
</body>
</html>
Bon maintenant le rapport avec le titre de mon post (je suis sûr que tout le monde se posait la question) c'est ça : pourquoi quand j'enlève la première ligne (le doctype), tout fonctionne ??
Et surtout : comment je peux y remédier ? (sans me passer du XHTML Strict)
Je serais éternellement reconnaissant à la ou les personnes qui pourront m'aider. Parce que là, 2 jours pour trouver que l'erreur vient d'une ligne à la con, je suis pas loin de péter un câble...