Discussion :

[ilood]

Bonjour,

J'aimerai cr�er un menu d�roulant sans � avoir � modifier le code html ci-dessous. J'ai commenc� un code js mais je n'arrive pas � r�cup�rer le num�ro du menu sur lequel la souris passe.
Avez-vous une id�e ? Un exmple ?

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
<div id="menu">
    <dl>
        <dt>Titre 1</dt>
        <dd>
            <ul>
                <li>item 1</li>
                <li>item 2</li>
                <li>item 3</li>
            </ul>
        </dd>
    </dl>
    <dl>
        <dt>Titre 2</dt>
        <dd>
            <ul>
                <li>item 1</li>
                <li>item 2</li>
                <li>item 3</li>
            </ul>
        </dd>
    </dl>
</div>

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
<script type="text/javascript">
var PAGE = function(){
	return {
		addLoadEvent : function(e) {
			if (window.addEventListener)
	 			window.addEventListener('load', e, false);
	  		else if (window.attachEvent)
				window.attachEvent('onload', e);
		},
		menu : function(){
			return {
				init : function(){
					this.deplie();
				},
				deplie : function(){
					var _menu = document.getElementById('menu');
					var _dls = _menu.getElementsByTagName('dl');
					var _dt = new Array();
					for(var i=0;i<_dls.length;i++){
						var _dts = _dls[i].getElementsByTagName('dt');
						_dt.push(_dts[0]);
					}
					for(var i=0;i<_dt.length;i++){
						_dt[i].onmouseover = function(){
							alert('Hello '+i);
						}
					}
				}
			}
		}()
	}
}();
 
PAGE.addLoadEvent(function(){
	PAGE.menu.init();
});</script>

[marcha]

Salut,

Code :

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

1
2
3
4
 
_dt[i].onmouseover = function(i) {
    return function() { alert('Hello '+i); }
}(i);

Un peu de th�orie ici

[ilood]

Code :

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

1
2
3
4
 
_dt[i].onmouseover = function(i) {
    return function() { alert('Hello '+i); }
}(i);

Effectivement lorsque la page est charg� j'ai bien deux alertes avec les i bien incr�ment�s.
Mais au survol des menus je n'ai plus d'alerte.

Le but est qu'au survol du menu je puisse r�cup�rer son num�ro. Le but final �tant d'afficher un sous menu.

[le_chomeur]

pourquoi ?

Code :

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

1
2
3
4
 
 function(i) {
    return function() { alert('Hello '+i); }
}(i);

et non pas :

Code :

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

1
2
3
 function(i) {
    alert('Hello '+i);
}(i);

?

[DoubleU]

Parce qu'en �crivant ca, tu ex�cutes la fonction imm�diatement ^^

[le_chomeur]

ha vi n'avais point vu le param (i) planqu� :p

[marcha]

Effectivement lorsque la page est charg� j'ai bien deux alertes avec les i bien incr�ment�s.
Mais au survol des menus je n'ai plus d'alerte.

Tu peux reposter ton code actuel ?

[ilood]

Tu peux reposter ton code actuel ?

Au temps pour moi, je n'avais pas vu le return devant la fonction.
Ca fonctionne maintenant.

Je vais essayer de progresser avec ces �l�ments.

Merci

[ilood]

J'ai r�ussi � obtenir ce que je souhaitais.

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
var PAGE = function(){
	return {
		addLoadEvent : function(e) {
			if (window.addEventListener)
	 			window.addEventListener('load', e, false);
	  		else if (window.attachEvent)
				window.attachEvent('onload', e);
		},
		menu : function(){
			return {
				init : function(){
					this.deplie();
				},
				deplie : function(){
					var _menu = document.getElementById('menu');
					var _dls = _menu.getElementsByTagName('dl');
					var _dt = new Array(); var _dd = new Array();
					for(var i=0;i<_dls.length;i++){
						var _dts = _dls[i].getElementsByTagName('dt');
						var _dds = _dls[i].getElementsByTagName('dd');
						_dt.push(_dts[0]);
						_dd.push(_dds[0]);
					}
					for(var i=0;i<_dt.length;i++){
						_dt[i].onmouseover = function(i){
							return function(){
								_dd[i].style.display = 'block';
								_dd[i].onmouseover = function(i){
									return function(){
										_dd[i].style.display = 'block';
									}
								}(i);
							}
						}(i);
						_dt[i].onmouseout = function(i){
							return function(){
								_dd[i].style.display = 'none';
								_dd[i].onmouseout = function(i){
									return function(){
										_dd[i].style.display = 'none';
									}
								}(i);
							}
						}(i);
					}
				}
			}
		}()
	}
}();

Il y a peut-�tre des optimisations d'�criture, si vous souhaitez y participer, j'en prendrai note avec plaisir.

[le_chomeur]

quelques optimisation :

Code :

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

1
2
3
4
var i=0;i<_dls.length;i++
en
var i = 0 , l = _dls.length ; i < l ; i++
évite d'avoir a recalculer la taille du tableu a chaque boucle :)

je te conseillerais �galement d'utiliser un tableau a plusieurs dimension mais bon apr�s c'est chacun ses pr�f�rences de code.

pour le reste �a va ...

[marcha]

Code :

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

1
2
3
var _dt = new Array(); var _dd = new Array();
// plus simplement:
var _dt = [], _dd = [];