[IE bug] Mouseover, Timer, Layers
Il s'agit donc d'un sous menu qui apparait sous un onmousover, et qui disparait au bout de 3 secondes d'inactivité.
la fonction reload permet de detecter l'inactiviter et d reloader le calk en cas d'activité.
bon alors voici le code JS que j'ai fait :
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53
|
var calkName = new Array();
calkName[0] = "presentation";
calkName[1] = "gallery";
calkName[2] = "technique";
var corner, lastCalk, timer;
function popup(id, span) {
clearTimeout(timer);
var calk, name, offSet;
name = calkName[id] + "_layer";
if(lastCalk != null) lastCalk.style.visibility="hidden";
calk = document.getElementById(name);
corner = document.getElementById("corner");
lastCalk=calk;
if(window.ActiveXObject)
offSet = -140;
else
offSet = 0;
var calkX = findPosX(span) + offSet;
var calkY = findPosY(span) + 18;
var cornerX = calkX-35;
var cornerY = calkY-42;
calk.style.left = calkX + 'px';
calk.style.top = calkY + 'px';
corner.style.top = cornerY + 'px';
corner.style.left = cornerX + 'px';
calk.style.visibility="visible";
corner.style.visibility="visible";
timer = setTimeout('hideAll()',3000);
}
function reloadCalk() {
clearTimeout(timer);
timer = setTimeout('hideAll()',3000);
}
function hideAll() {
var name, calk,i;
corner.style.visibility="hidden";
for(i=0;i<calkName.length;i++) {
name = calkName[i] + "_layer";
calk = document.getElementById(name);
calk.style.visibility="hidden";
}
}
function findPosY(obj) { le code marche pour IE et Firefox }
function findPosY(obj) { le code marche pour IE et Firefox } |
Le code HTML :
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
|
<ul>
<li><a href="index.php" ><span>Home</span></a></li>
<li><a href="#" onmouseover="popup(0,this)"><span>Presentation</span></a></li>
<li><a href="#" onmouseover="popup(1, this)"><span>Gallery</span></a></li>
<li><a href="#" onmouseover="popup(2,this)"><span>Technique</span></a></li>
<li class="last"><a href="index.php?mods=links"><span>Links</span></a></li>
</ul>
<!-- SubMenu presentation -->
<div id="presentation_layer">
<img src="images/menu_01.gif" class="submenu_layer" alt="logo"/>
<!-- Debut de la liste -->
<div class="list">
<ul onmouseover="reloadCalk()">
<a href="index.php?mods=series"><li>Series</li></a>
<a href="index.php?mods=history"><li>History</li></a>
<a href="index.php?mods=protections"><li class="last">Protections</li></a>
</ul>
</div>
<!-- Fin de la liste -->
<div class="line"></div>
</div>
<!-- SubMenu presentation --> |
Et donc j'ai un probleme avec IE qui m'efface de temps en temps les <li> de <div class="list">
pour voir le probleme visualiser sur IE :
http://www.profildesign-system.com/v2.a/
Merci d'avance pour l'aide