Merci
Langellier pour ta réponse à mon problème.
J'ai déjà validé mes pages via le developper tool de Firefox, en fait mon problème est spécifique à IE5.2. Sur les autres navigateurs mes scripts fonctionnent très bien.
Pour te faire une confidence, je bosse sur pc, mais les personnes pour qui je travaille veulent que le site marche aussi sur IE5.2 mac vu que beaucoup d'utilisateur mac s'en servent encore (comme moi il y a plus d'un an)-ils sont prévenu que la tache sera difficile vu la très particulière (pour ne pas dire mauvaise) interprétation du code de ce navigateur-.
Pour te donner des exemples de codes :
Le Javascript:
/*
ceci est un code qui affiche un rellover contenant la légende sur mon menu
la variable
id représente l'id de la div
la variable
legend représente le txt de la légende du id concerné
l'id
legend représente la div à afficher
*/
<script language="javascript">
<!--
// affiche la légende
function showLegend(id,legend)
{
document.getElementById("legend").style.left = ((findPosX(id) + id.offsetWidth) - 4) + "px";//findWidth(id)
document.getElementById("legend").style.top = (findPosY(id) - 15) + "px";
document.getElementById("legendContent").innerHTML = legend;
document.getElementById("legend").style.visibility = "visible";
}
//masque la légende
function hideLegend()
{
document.getElementById("legend").style.visibility = "hidden";
}
// find X pos
function findPosX(obj)
{
var curleft = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curleft += obj.offsetLeft
obj = obj.offsetParent;
}
}
else if (obj.x)
curleft += obj.x;
return curleft;
}
// find Y pos
function findPosY(obj)
{
var curtop = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curtop += obj.offsetTop
obj = obj.offsetParent;
}
}
else if (obj.y)
curtop += obj.y;
return curtop;
}
//-->
</script>
Le HTML :
/*cette div (legend) représente le rellover qui viendra ce superposer aux div présentées en dessous
*/
<div id="legend" class="legend" style="display:none;">
<div class="cornerLegendLeft"></div>
<div id="legendContent" class="legendContent"></div>
<div class="cornerLegendRight"></div>
</div>
/* ces quelques div représentent les liens et la surface sur laquelle le rellover viendra se superposer sur un "onmouseover"*/
<div onclick="window.location='collection.php?id=1';" onMouseOver="javascript:showLegend(this, 'Expect');" onMouseOut="javascript:hideLegend();" id="bout6" style="background-color:#8C511D;cursor
ointer;"><img src="images/1pix.gif" width="1" height="1" border=0 alt="off"></div>
<div onclick="window.location='collection.php?id=2';" onMouseOver="javascript:showLegend(this, 'Les Petites Fuites');" onMouseOut="javascript:hideLegend();" id="bout4" style="background-color:#ED1C24;cursor
ointer;"><img src="images/1pix.gif" width="1" height="1" border=0 alt="off"></div>
<div onclick="window.location='collection.php?id=3';" onMouseOver="javascript:showLegend(this, 'Le Jour et la Nuit');" onMouseOut="javascript:hideLegend();" id="bout17" style="background-color:#ED6D00;cursor
ointer;"><img src="images/1pix.gif" width="1" height="1" border=0 alt="off"></div>
<div onclick="window.location='collection.php?id=5';" onMouseOver="javascript:showLegend(this, 'Traps');" onMouseOut="javascript:hideLegend();" id="bout19" style="background-color:#4E341D;cursor
ointer;"><img src="images/1pix.gif" width="1" height="1" border=0 alt="off"></div>
LE CSS:
/*ces css représentent la div legend avec les images en fond (comme un cadre)*/
.legend { position:absolute; z-index:1; }
.legend .cornerLegendLeft { position:relative; background-image:url(images/img_gallerie/vignette_left.gif); background-repeat:no-repeat; float:left; width:10px; height:22px; }
.legend .legendContent { position:relative; background-image:url(images/img_gallerie/vignette_center.gif); background-repeat:repeat-x; float:left; height:22px; }
.legend .cornerLegendRight { position:relative; background-image:url(images/img_gallerie/vignette_right.gif); background-repeat:no-repeat; float:left; width:12px; height:22px; }
/*ces css representent les boutons du html ci dessus(j'en donne que deux ou trois, à part les valeurs ce sont les mêmes
*/
DIV#bout6 { position:absolute; left:250px; top:90px; width:15px; height:15px; }
DIV#bout4 { position:absolute; left:185px; top:293px; width:45px; height:45px; }
DIV#bout17 { position:absolute; left:600px; top:350px; width:15px; height:15px; }
DIV#bout19 { position:absolute; left:648px; top:210px; width:36px; height:36px; }
ET le problème c'est que sous ie5.2 les images de fond du rellover (définies dans le fichier css) ne s'affichent pas, j'ai essayé de mettre avec ou sans guillemet dans les url des background de "legend" de la css, j'ai aussi essayé de changer le "display: block/none" par "visibility: hidden/visible" sans changement.
