Reconnaitre quel lien est survolé.

**kami-no-ryuu** · 11/06/2012, 21h27

ce qui ce trouve avant n'a pas changer (en dehors des nom de variable) :

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
 
var prelien = document.getElementById('menuDeroulant') ; 
 
    var menuLien = prelien.getElementsByClassName('Menu_premier'); 
 
 
     for (var i = 0 ; i < menuLien.length ; ++i) { 
       (menuLien[i].onmouseover= (function(menuHovered){
 return function(){
 
  alert("teste");
 };
})(menuLien[i]);
 
}

Invité · 11/06/2012, 21h30

si tu ne sais pas copier correctement, je peux rien pour toi. (erreur ligne 8)

**kami-no-ryuu** · 11/06/2012, 21h40

Effectivement... j'ai retiré la parenthèse par contre toujours rien.

Invité · 11/06/2012, 21h53

je suis pas devin.

code de ta page html,
code javascript?

Et enfin, ca serait bien si tu pouvais indenter correctement ton code !!!!

**Eric2a** · 11/06/2012, 21h56

Code :

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

1
2
3
4
5
6
7
8
9
10
11
for (var i=0; i<menuLien.length; ++i) {
 
	(function(i) {
 
		menuLien[i].onmouseover=function(){
			alert('Test Lien # '+i);
		};
 
	})(i);
 
}

**kami-no-ryuu** · 11/06/2012, 22h26

Eric2a : Merci pour le i c'était déjà posté ca fonctionnait grâce a des réponses plus tôt dans le sujet, ici on essaye de récupérer carrément les class dire que sa soit plus propre.

Alors pour le JS, voici tout ce qui constitue cette vérification :

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
function displayMenu() 
{ 
 
var prelien = document.getElementById('menuDeroulant') ; 
 
    var menuLien = prelien.getElementsByClassName('Menu_premier'); 
 
 
     for (var i = 0 ; i < menuLien.length ; ++i) { 
       menuLien[i]onmouseover=(function(menuHovered){
 return function(){
 
  alert("teste");
 };
})(menuLien[i]);
 
}
 
 
 
} 
window.onload = displayMenu;

Pour le code complet du menu, le voici :

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
 <div id="menu">
 
   <ul id="menuDeroulant">
 
  <li>
   <a href="index.php" >Accueil</a>
 
  </li>
 
  <li>
 
   <a href="Actu.php">Actu</a>
 
 
  </li>
 
  <li><div class="Menu_premier">
   <a href="Actu.php?T=Anime">Anime</a>
   </div>
   <div class="sousMenu">
   <ul id="sousMenu0">
    <li><a href="Tag_news.php?t=Anime&Tag=PV">PV</a></li>
    <li><a href="Tag_news.php?t=Anime&Tag=Annonce">Annonce</a></li>
 
   </ul>
   </div>
  </li>
  <li><div class="Menu_premier">
   <a href="Actu.php?T=Manga">Manga</a>
   </div>
   <div class="sousMenu">
   <ul id="sousMenu1">         
    <li><a href="Tag_news.php?t=Manga&Tag=Oricon">Top 10 des ventes</a></li>
    <li><a href="#">Annonce</a></li>
 
   </ul>
   </div>
  </li>
  <li><div class="Menu_premier">
   <a href="Actu.php?T=Jmusic">Jmusic</a>
   </div>
   <div class="sousMenu">
   <ul class="sousMenu">         
    <li><a href="Tag_news.php?t=Jmusic&Tag=PV">PV</a></li>
    <li><a href="#">CM</a></li>
    <li><a href="#">Annonce</a></li>
    <li><a href="#">Départ</a></li>
    <li><a href="#">Live en france</a></li>    
 
   </ul>
   </div>
  </li>
  <li><div class="Menu_premier">
   <a href="Actu.php?T=Game">Jeux vidéo</a>
   </div>
   <div class="sousMenu">
   <ul class="sousMenu3">         
    <li><a href="Tag_news.php?t=Game&Tag=Annonce">Annonce</a></li>
 
   </ul>
   </div>
  </li>
  <li><div class="Menu_premier">
   <a href="Actu.php?T=Drama">Drama/Jmusic</a>
   </div>
   <div class="sousMenu">
   <ul class="sousMenu4">         
    <li><a href="Tag_news.php?t=Drama&Tag=Annonce">Annonce</a></li>
    <li><a href="Tag_news.php?t=Drama&Tag=PV">PV</a></li>
 
   </ul>
   </div>
  </li>
  <li><div class="Menu_premier">
   <a href="Actu.php?T=Divers">Divers</a>
   </div>
   <div class="sousMenu">
   <ul class="sousMenu5">         
    <li><a href="#">Annonce</a></li>
    <li><a href="#">Insolite</a></li>
    <li><a href="#">Goodies</a></li>
    <li><a href="#">Figurine</a></li>
    <li><a href="#">Japon</a></li>
 
 
   </ul>
   </div>
  </li>
  <li>
   <a href="Actu.php?T=Article">Article</a>
   <div class="sousMenu">
   <ul class="sousMenu9">         
    <li><a href="Actu.php?T=Article&S=Event">Evenement</a></li>
    <li><a href="Actu.php?T=Article&S=LiveReport">Live report</a></li>
    <li><a href="#">Interview</a></li>
 
   </ul>
   </div>
  </li>
 </ul>
 
     </div>

Invité · 11/06/2012, 22h30

ligne 10...
Je crois qu'il serait temps que tu installes firefox et son extension firebug. Je te laisse le soin de te documenter.

**Willpower** · 11/06/2012, 22h32

Envoyé par kami-no-ryuu

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
function displayMenu() 
{ 
 
var prelien = document.getElementById('menuDeroulant') ; 
 
    var menuLien = prelien.getElementsByClassName('Menu_premier'); 
 
 
     for (var i = 0 ; i < menuLien.length ; ++i) { 
       menuLien[i]onmouseover=(function(menuHovered){
 return function(){
 
  alert("teste");
 };
})(menuLien[i]);

Comme le dis Galérien69 essaye d'indenter ton code correctement, c'est tellement plus facile à lire et donc donne d'autant plus envie de t'aider.

Ensuite, effectivement après une lecture rapide de ces 3 lignes de codes, je ne vois pas l'erreur. Y a-t'il un message d'erreur qui apparait dans ta console ? (CTRL+SHIFT+J)

edit: oups, après relecture, je te conseille d'oublier "getElementsByClassName" pour des raisons de compatibilités.

edit2: oups, je n'avais pas vu, galérien à répondu en même temps que moi et effectivement je n'avais pas vu l'erreur.

**kami-no-ryuu** · 11/06/2012, 23h06

Effectivement bien pratique firbug, j'avais supprimer le point, je l'ai remis l'alert fonctionne.

pour getElementsByClassName je regarderais demain dans se cas.

Sur ce bonne nuit, demain je testerais la suite en espérant que sa se passe bien cette fois.

Merci pour vos réponses =) .

**kami-no-ryuu** · 12/06/2012, 15h31

Bon j'ai affiché le contenu de menuHovered.innerHTML, il contient donc ce que contient l'id évidement, mais par contre ca ne m'aide pas trop vu que le sous menu est contenu dans un id juste en dessous de celui récupéré pour le clique.

Je vais testé en remontant un div plus haut récupéré le firstchild et tester le "survolement" fonctionne.

**kami-no-ryuu** · 12/06/2012, 20h06

Bon mes teste ne fonctionne pas, j'ai essayer de vérifier le parent et récupérer que l'enfant (après avoir englobé le menu avec une autre class), j'ai essaye de récupéré la div dans la fonction (pas super propre, mais toute façon sa marche pas)

Je suis un peu paumé, en plus j'ai une erreur de "getElementsByClassName is not a function" quand je teste de récupère la class dans la class

Invité · 12/06/2012, 20h28

t'es tout simplement incompréhensible. C'est un manque de rigueur particulièrement agaçant, mais je conçois que tu ne t'en rendes pas compte aussi je te souligne les points.

Il faut être clair.

Bon j'ai affiché le contenu de menuHovered.innerHTML, il contient donc ce que contient l'id évidement

NON. l'id c'est quoi?
on ne sait même pas sur quel code tu te bases.

le sous menu est contenu dans un id juste en dessous de celui récupéré pour le clique.

le sous menu c'est déjà pas clair. Qu'est-ce que c'est ?le li imbriqué dans le li parent?, le ul imbriqué dans le li parent?

celui récupéré désigne le sous menu récupéré. Tu as donc un sous menu sous un sous menu récupéré. Est-ce ce que tu veux dire?
Qui plus est contenu dans un id.

On ne sait pas ce que tu veux faire.

La suite c'est du détail, vu que de toute façon on sait pas ce que tu fais.

après avoir englobé le menu avec une autre class

encore une fois t'as pas défini ton menu. une classe, c'est un attribut... je pense pas qu'un attribut englobe quoique ce soit.

Enfin: regarde bien le temps qui s'écoule entre les posts. Ca vaut le coup de passer du temps à rédiger un message propre, sans fautes, et clair, de t'assurer que les autres comprennent ce que tu dis, notamment quand c'est toi qui demande de l'aide. Tu écris un peu pour toi, mais avant tout pour les autres.

edit: je t'avais déjà fait le remarque que tu étais incompréhensible. Ce sera donc la dernière remarque de ce coté là pour ma part.

**kami-no-ryuu** · 12/06/2012, 22h18

Et bien désolé pour mon côté incompréhensible, ca me semble claire mais j’imagine que sans code ca ne l'est pas forcément surtout que celui ci a évolué, je vais donc montrer l’architecture du menu sans l'inutile du code, sa sera peut-être plus simple, je vais rajouter une touche de commentaire en plus pour être le plus claire possible :

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
 
			<ul id="menuDeroulant"> /* englobe tout le menu et les sous menus */
<li><div class="Menu_premier"> /* Div qui englobe chaque  partie du menu. */
		<div class ="Menu_top_onglet"> /* englobe la partie qui sera vérifier pour savoir s'il est survolé*/
			<a href="#">Oricon</a>
			</div>
 
			<ul class="sousMenu">/* englobe les sous menus, ceux qui doivent être récupéré et affiché dans la div qui contient un id nommé "contenu_bar" au survole du "Menu_top_onglet" associer */			      
				<li><a href="Lien_1">Top 10 Oricon</a></li>
				<li><a href="Lien_2">Annonce</a></li>
 
			</ul>
/* ici plusieurs autres '<div class="Menu_premier">' et ce qu'elles contiennent comme montré plus haut */
 
			</div>
		</li></ul></div>

Voilà j'éspere que mon explication est la plus claire possible.

**NoSmoking** · 12/06/2012, 22h21

en reprenant le post en se rend compte que ton approche HTML est loin d'être au top, imbrication de DIV encadrant des A dans des LI sans aucunes nécessité apparente. Je commencerais par simplifier la structure pour faire quelque chose de plus simple

Code html :

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
<div id="menu">
  <ul id="menuDeroulant">
    <li><a href="index.php">Accueil</a></li>
    <li><a href="Actu.php">Actu</a></li>
    <li class="Menu_premier"><a href="Actu.php?T=Anime">Anime</a>
      <ul class="sousMenu"> 
        <li><a href="Tag_news.php?t=Anime&Tag=PV">PV</a></li>
        <li><a href="Tag_news.php?t=Anime&Tag=Annonce">Annonce</a></li>
      </ul>
    </li>
    <li class="Menu_premier"><a href="Actu.php?T=Manga">Manga</a>
      <ul class="sousMenu"> 
        <li><a href="Tag_news.php?t=Manga&Tag=Oricon">Top 10 des ventes</a></li>
        <li><a href="#">Annonce</a></li>
      </ul>
    </li><!-- ETC -->

il est ainsi plus facile de s'y retrouver et l'on peut récupérer un UL, contenant donc des LI, dans un LI en utilisant la méthode getElementsByTagName.

Le masquage d'une UL masquant les LI contenus, il suffit de ne s'occuper que de celui ci en lui modifiant son display, sans être obligé de passer par une DIV intermédiaire.

On aura bien compris que ton soucis et d'afficher/masquer au survol le sous menu s'y raccordant, ou alors je me plante!

Outre le fait que ce genre de menu ce fait de nos jours en CSS pur en utilisant les pseudo-classes dynamiques hover par exemple, le code à mettre en oeuvre est assez simple et ne requière pas de passer, ou de récupérer, un quelconque index, comme initialement envisagé.

Dans le principe
- récupération des éléments maitres, LI de premier niveau possédant la class Menu_premier
- récupération des éléments UL inclus dans ceci, pour cela plusieurs méthodes permettent d'y arriver, méthode getElementsByTagName, comme indiqué plus haut ou autre récupération de l'ID à partir de l'ID du conteneur...pour exemple

Code html :

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

1
2
3
4
5
6
    <li class="Menu_premier" id="li_Anime"><a href="Actu.php?T=Anime">Anime</a>
      <ul id="Anime" class="sousMenu"> 
        <li><a href="Tag_news.php?t=Anime&Tag=PV">PV</a></li>
        <li><a href="Tag_news.php?t=Anime&Tag=Annonce">Annonce</a></li>
      </ul>
    </li>

pour récupérer la UL contenu dans le LI, et dans l'exemple ci dessus on peut faire un simple

Code :

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

var sId = this.id.replace('li_',''); // li_Anime -> Anime

Revenons à la récupération des LI class="Menu_premier".

Pour les récupérer, outre la méthode getElementsByClassName, malheureusement non encore supportée par 100% des navigateurs, on peut récupérer les balises A via un getElementsByTagName('A') à partir de la DIV contenant le menu, ou encore en utilisant la collection documents.links.

Il suffit ensuite de tester que la class Menu_premier est présente dans la balise contenant le lien, soit son parentNode.

Au final on pourrait avoir quelque chose comme

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
var oRef = document.getElementById('menu');
var oLien = oRef.getElementsByTagName('A');// ou document.links;
var i, nb = oLien.length;
for( i=0; i <nb; i++){
  if( oLien[i].parentNode.className.indexOf('Menu_premier') >-1){
    oLien[i].parentNode.onmouseover = function(){
      var sId = this.id.replace('li_','');      
      if( sId){
        // get objet a afficher
        var oDiv = document.getElementById(sId);
        if( oDiv){
          oDiv.style.display ='block';
        }
      }
    };
  }
}

voilà...

**kami-no-ryuu** · 12/06/2012, 22h45

En fait je l'affiche dans un div a part du menu (plus bas, en fait je fait un système de menu sous forme d'onglet) et donc rien qu'en html et JS ca ne semble pas possible, le rend en block au lieu de non ne sert donc a rien vu que les sous menu ne sont pas au bon endroits a la base, ils sont juste là pour être récupéré.

Ou alors il faudrait que je mette les sous menu dans ce div, mais bon c'est pas super propre je trouve.

Sinon effectivement ton architecture du menu est déjà plus propre.

**NoSmoking** · 12/06/2012, 23h06

cela ne change rien à l'approche si tu as un code de ce type

Code html :

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
<div id="menu">
  <ul id="menuDeroulant">
    <li><a href="index.php">Accueil</a></li>
    <li><a href="Actu.php">Actu</a></li>
    <li class="Menu_premier" id="li_Anime"><a href="Actu.php?T=Anime">Anime</a></li>
    <li class="Menu_premier" id="li_Manga"><a href="Actu.php?T=Manga">Manga</a></li>
  </ul>
</div>
<div>
  <ul id="Manga" class="sousMenu"> 
    <li><a href="Tag_news.php?t=Manga&Tag=Oricon">Top 10 des ventes</a></li>
    <li><a href="#">Annonce</a></li>
  </ul>
  <ul id="Anime" class="sousMenu"> 
    <li><a href="Tag_news.php?t=Anime&Tag=PV">PV</a></li>
    <li><a href="Tag_news.php?t=Anime&Tag=Annonce">Annonce</a></li>
  </ul>
</div>

**kami-no-ryuu** · 13/06/2012, 01h07

J'ai rajouter quelque truc et effectivement le code fonctionne parfaitement.

Sinon je ne comprend pas pour indexOf qu'est il en fait ?

Sinon je n’avais pas pensé a faire cela comme ca , au départ je pensais faire sa selon la valeur du menu, c'est un peu pareil au final sauf que c'est un peu plus propre tout de même.

Sinon petite question, pour vérifier au contraire qu'ils ne sont pas survolé ? (pour remettre comment avant en cas de non survolage des éléments) je suppose que mettre un "!" avant ne suffis pas.

En tout cas merci a vous trois de vous êtres penché sur mon problème, je suis un peu débutant en JavaScript, j'ai donc pas mal pataugé.

Encore merci. =) .

**Willpower** · 13/06/2012, 07h46

Envoyé par kami-no-ryuu

Sinon je ne comprend pas pour indexOf qu'est il en fait ?

Element.className pouvant contenir plusieurs classes, plutôt que de faire

Element.className == "class1" alors qu'il peut être égal à "class2 class1" (signifiant qu'il possède la class2 ET la class1).

On va faire une recherche sur le "string" de notre "classe" avec indexOf qui renvoit un naturel (correspondant à la position de la première occurrence) s'il l'a trouve, sinon -1.

Donc dans l'exemple de "class2 class1".indexOf("class1") ça renverra 7, donc on aura bien "class1" de trouvé.

**Watilin** · 13/06/2012, 12h20

Envoyé par galerien69

Voilà un lien de 2010...

Lecture très intéressante ! Apparemment le bonhomme est un ex-développeur de Prototype, on ressent bien toute son amertume...

**NoSmoking** · 13/06/2012, 22h52

Envoyé par kami-no-ryuu

Sinon petite question, pour vérifier au contraire qu'ils ne sont pas survolé ? (pour remettre comment avant en cas de non survolage des éléments) je suppose que mettre un "!" avant ne suffis pas.

il n'existe effectivement pas d'événement onnotmouseover

Je présumes que tu souhaiterais que lorsqu'un élément du menu est survolé le sous menu en cours s'efface au profit du nouveau.

Dans ce cas il faut faire une boucle dans laquelle on masquerait les sous menus non concernés et afficherait celui devant l'être.

Il existe plusieurs façons de procéder, comme d'habitude, pour gérer cela, en voila une.
- Récupération des sous menus lors de l'initialisation.
- affichage/masquage sur le mouseover des éléments du menu, par appel d'une fonction.

La fonction d'initialisation pourrait ressembler à cela

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
var lstSousMenu = []; // tableau pour stoker les objets sous menus
 
function initMenu(){
  var oRef = document.getElementById('menu');
  var oLien = oRef.getElementsByTagName('A');
  var i, nb = oLien.length;
  for( i=0; i <nb; i++){
    // si le parent possede la class Menu_premier
    if( oLien[i].parentNode.className.indexOf('Menu_premier') >-1){
      // recuperation de l'ID du sous menu
      var sId = oLien[i].parentNode.id.replace('li_','');    
      if( sId){
        // ajout dans tableau "associatif"
        lstSousMenu[sId] = document.getElementById(sId);
      }        
      // ajout fonction sur mouseover
      oLien[i].parentNode.onmouseover = function(){
        showSousMenu( this.id.replace('li_',''));
      };
    }
  }
}

maintenant la fonction d'affichage masquage showSousMenu utilisée ci dessus, à laquelle on passe en paramètre l'ID du sous menu à afficher

Code :

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

1
2
3
4
5
6
7
8
9
10
11
function showSousMenu( ref){
  var id;
  // parcours de la liste
  for( id in lstSousMenu){
    // si l'element existe
    if( lstSousMenu[i]){
      // affectation du style suivant le cas
      lstSousMenu[id].style.display = id == ref ? 'block' : 'none';
    }
  }
}

maintenant il te suffit d'appeler la fonction initMenu() lorsque le DOM est constitué.

Reconnaitre quel lien est survolé.

JavaScript

Discussions similaires

Partager

Partager