Position d'un item de menu en JVS

**F@bien.fd** · 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.

**F@bien.fd** · 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