Discussion :

[elraton]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[elraton]

up de nouveaux