Position d'un item de menu en JVS

**[email protected]** · 01/03/2017, 12h29

Bonjour � tous,

Trouver les coordonn�es de la position de la souris ne me posent pas de soucis mais je ne trouve pas le moyen d'identifier les coordonn�es left et top d'un item de menu lorsque la souris le survole ou le fait appara�tre. qqun peut-il me guider svp ?
Merci par avance.

voici les extraits de codes que j'utilise
en html d'abord

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
 
<div id="headermenu">
        <div id="menuh">
        <ul style="width: 700px;" id="nav" class="menu"> 
			   
			<li class="nav_item item_0 first_menu_item">
			<a href="index.php" class="menu_item"><span style="font-size:13px">Page d'accueil</span></a>
               </li>
			   
            <li class="nav_item item_1">	
				<?php	
				$fichier = file("info1.txt");
				$un = $fichier[0];
				$fichier = file("info2.txt");
				$deux = $fichier[0];
?>

			<a href="installe_zip.php" target="_blank" class="menu_item"
				onmouseover="affiche(event, afficheur2, 'On note <?php echo  $un + $deux ?>  fois ', 92, 14,'menuh');"
				onmouseout="efface(afficheur2);">Ligne menu 1</a>			 
			   </li>
			   	   
            <li class="nav_item item_2">	
				<?php	
				$fichier = file("info3.txt");
				$trois = $fichier[0];
				$fichier = file("info4.txt");
				$quatre = $fichier[0];
				?>																  													                          			
			<a href="MAJ_zip.php" target="_blank" class="menu_item"
				onmouseover="affiche(event, afficheur2, 'On note <?php echo  $trois + $quatre ?> fois ', 260, 14,'item_2');"
				onmouseout="efface(afficheur2);">Ligne menu 2</a>	 
		       </li>		   		   
			   
            <li class="">
				<?php	
				$fichier = file("info5.txt");
				$cinq = $fichier[0];
				$fichier = file("info6.txt");
				$six = $fichier[0];
				?>			
			<a href="MAJ_help_zip.php" target="_blank" class="menu_item"
			       onmouseover="affiche(event, afficheur2, 'On note <?php echo  $cinq + $six ?> fois ', 404, 14,'nav');"
				onmouseout="efface(afficheur2);">Ligne menu 3</a>		 
		       </li>
			   
            <li class="nav_item item_4 last_menu_item">		
			<a href="http://aide.html" class="menu_item" onclick="window.open(this.href);return false;">Aide en Ligne</a>
		       </li>
			
         </ul>		 
        </div>
    </div>

puis le code JVS

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
				
				function GetId(id)
				{
				return document.getElementById(id);
				}
				var larg; 				
				var haut;	
var bb;	
var pp;


function calculeOffsetLeft(r){
  return calculeOffset(r,"offsetLeft")
}
function calculeOffsetTop(r){
  return calculeOffset(r,"offsetTop")
}
function calculeOffset(element,attr){
  var offset=0;
  while(element){
    offset+=element[attr];
    element=element.offsetParent
  }
  return offset
}



function affiche(e,id,text,Xdist,Ydist, truc) 											
				{	

					if (document.body)
					{					
						larg = ((document.body.clientWidth-936)/2);
						if (larg < 6) {
							larg = 6; 
						}
					}
					else
					{
						larg = ((window.innerWidth-936)/2);
						if (larg < 6) {
							larg = 6; 
						}
					}
					
					if (Ydist == 0)
					{ 

				text = text + "-0- ";				
				
						id.style.left= 478 + Xdist +"px";	
						id.style.top=e.pageY -146 +"px";
					}
					else 
					if (Ydist == -1)
					{ 

				text = text + "-1- ";
						id.style.left= 5 + Xdist +"px";	
						id.style.top=e.pageY -172 +"px";
					}
					else					
					{		
			

bb=calculeOffset(truc,"offsetLeft");	// ligne de test

				text = text + "-2- ";				
						id.style.left= Xdist +"px";	
						id.style.top= Ydist +"px";
					}
					    		
							
					id.style.display = 'block'; 
					id.innerHTML = text + "bb -> " + bb; 				
				}

				function efface(id) 
				{				
					id.style.display = 'none'; 	
				}

Dans les trois cas le texte affich� dans la bulle

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

 id.innerHTML = text + "bb -> " + bb;

se termine par -2- bb -> NaN
Donc je n'arrive pas � obtenir la position Left de l'item du menu avant d'afficher la bulle.

**[email protected]** · 02/03/2017, 14h21

Il suffit de d�finir un div pour chaque item puis de le passer dans la fonction affiche

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
 
<div id="headermenu">
        <div id="menuh">
        <ul style="width: 700px;" id="nav" class="menu"> 
			   
			<li class="nav_item item_0 first_menu_item">
			<a href="index.php" class="menu_item"><span style="font-size:13px">Page d'accueil</span></a>
               </li>
			   
            <li id="item1" class="nav_item item_1">	
				<?php	
				$fichier = file("info1.txt");
				$un = $fichier[0];
				$fichier = file("info2.txt");
				$deux = $fichier[0];
?>

			<a href="installe_zip.php" target="_blank" class="menu_item"
				onmouseover="affiche(event, afficheur2, 'On note <?php echo  $un + $deux ?>  fois ', 92, 14,iditem1 );"
				onmouseout="efface(afficheur2);">Ligne menu 1</a>			 
			   </li>
			   	   
            <li  id="item2" class="nav_item item_2">	
				<?php	
				$fichier = file("info3.txt");
				$trois = $fichier[0];
				$fichier = file("info4.txt");
				$quatre = $fichier[0];
				?>																  													                          			
			<a href="MAJ_zip.php" target="_blank" class="menu_item"
				onmouseover="affiche(event, afficheur2, 'On note <?php echo  $trois + $quatre ?> fois ', 260, 14,iditem2 );"
				onmouseout="efface(afficheur2);">Ligne menu 2</a>	 
		       </li>		   		   
			   
            <li  id="item3" class="nav_item item_3">	
				<?php	
				$fichier = file("info5.txt");
				$cinq = $fichier[0];
				$fichier = file("info6.txt");
				$six = $fichier[0];
				?>			
			<a href="MAJ_help_zip.php" target="_blank" class="menu_item"
			       onmouseover="affiche(event, afficheur2, 'On note <?php echo  $cinq + $six ?> fois ', 404, 14,iditem3 );"
				onmouseout="efface(afficheur2);">Ligne menu 3</a>		 
		       </li>
			   
            <li class="nav_item item_4 last_menu_item">		
			<a href="http://aide.html" class="menu_item" onclick="window.open(this.href);return false;">Aide en Ligne</a>
		       </li>
			
         </ul>		 
        </div>
    </div>

ensuite dans le fichier JVS supprimer les variable de test bb et pp d�finir une variable ici je l'appelle gauche puis de l'utiliser apr�s avoir r�cup�rer uniquement le left de l'item puisque ici le top ne m'int�resse pas

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
				function GetId(id)
				{
				return document.getElementById(id);
				}
				var larg; 				
				var haut;				
				var gauche;	
 
 
				function calculeOffsetLeft(r)
				{
					return calculeOffset(r,"offsetLeft")
				}
				function calculeOffsetTop(r)
				{
					return calculeOffset(r,"offsetTop")
				}
				function calculeOffset(element,attr)
				{
					var offset=0;
					while(element)
					{
						offset+=element[attr];
						element=element.offsetParent
					}
					return offset
				}
 
				function montre(e,id,text) 
				{	
 
					if (document.body)
					{					
						larg = ((document.body.clientWidth-936)/2);
						if (larg < 6) {
							larg = 6; 
						}
					//  haut = (document.body.clientHeight);
					}
					else
					{
						larg = ((window.innerWidth-936)/2);
						if (larg < 6) {
							larg = 6; 
						}
					//  haut = (window.innerHeight);
					}
					haut = 132;				
 
				    id.style.left=e.pageX + 5 - larg +"px";
				    id.style.top=e.pageY + 25 - haut +"px";					
 
					id.style.display = 'block'; 
					id.innerHTML = text; 				
				}
 
				function cache(id) 
				{				
					id.style.display = 'none'; 	
				}
 
				function affiche(e,id,text,Xdist,Ydist, truc) 											
				{	
 
					if (document.body)
					{					
						larg = ((document.body.clientWidth-936)/2);
						if (larg < 6) {
							larg = 6; 
						}
					}
					else
					{
						larg = ((window.innerWidth-936)/2);
						if (larg < 6) {
							larg = 6; 
						}
					}
 
					if (Ydist == 0)
					{ 				
				text = text + "-0- ";				
 
						id.style.left= 478 + Xdist +"px";	
						id.style.top=e.pageY -146 +"px";
					}
					else 
					if (Ydist == -1)
					{ 
				text = text + "-1- ";
						id.style.left= 5 + Xdist +"px";	
						id.style.top=e.pageY -172 +"px";
					}
					else					
					{					
					gauche = calculeOffset(truc,"offsetLeft");	
				text = text + "-2- ";				
						id.style.left=gauche - larg- Xdist+"px";	
						id.style.top=Ydist +"px";
					}
 
					id.style.display = 'block'; 
					id.innerHTML = text + "larg -> "+ larg + "gauche -> " + gauche +  " haut -> " + haut; 				
				}
 
				function efface(id) 
				{				
					id.style.display = 'none'; 	
				}

Il reste � supprimer les variables de test dans la variable text.

Position d'un item de menu en JVS

JavaScript

Discussions similaires

Partager

Partager