Salut
J'ai un nouveau probleme qui concerne les infos bulles.
J ai utilisé une méthode qui conciste à créer des bulles grace a un balise qui est visible en passant la souris au dessus d'une image. Mais cette methode marche bien sous IE que lorsque je dis position fixed et sous mozilla lorsque je lui dit position absolute. Alors j ai utilsé plusieurs hack comme .important ou if gte IE 5 mais rien ne marche, pouvez vous m'expliquer pourquoi.
Le probleme ce trouve aussi quand je fais un scroll quand je laisse en fixed l infos bulle ne bouge pas ( ce qui est normal). Dans cette exemple j ai laissé en fixed. Testé en absolute vous allez voir normalement ce bug.
Voici le code
[code]
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<link href="style_test.css" rel="stylesheet" type="text/css" />
<!--[if gte IE 7]>
<style type="text/css">
#bulle { position: fixed; }
</style>
<![endif]-->
<script language="JavaScript" type="text/JavaScript">
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+20+"px";
document.getElementById("bulle").style.left = mouseX+20+"px";
document.getElementById("bulle").style.visibility = voir;
document.getElementById("bulle").style.display = display;
}
init();
function cache(){
document.getElementById("bulle").style.visibility = "hidden";
}
}
</script>
<link href="stylle_test.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="bulle"></div>
<h2> J ai volontairement simulé un scroll pour montrer le probleme de l info bulle il faut descendre pour voir l image </h2>
<div class="bulle-scroll">
<img onMouseOver="affiche('','texte blulle')" onMouseOut="affiche('cache')" src="http://www.google.fr/images/firefox/fox1.gif" width="60" height="60" />
</div>
</body>
</html>
[/code]
[code]img {
color: #0066CC;
margin-left: 300px;
}
#bulle {
background-color:#e7eec7;
position: fixed;
display:none;
font-size:11px;
background-color: #e7eec7;
border: dashed 1px #93b61a;
clear: both;
width: 150px;
text-align: justify;
}
.bulle-scroll {
color: #009999;
height: 60px;
width: 700px;
margin-top: 900px;
}
[/code]
Merci