• imprimer
  • aide

Forum de discussions « Publications ALL HTML »

Menu déroulant accessible

liste des forums liste des discussions Participer à la discussion

Photo de koala64 Message publié le lundi 10 juillet 2006 - 01h19 par koala64. modérateur http://www.allhtml.com/forums/posts_list/topic:464469 - http://www.wikini.net/wakka.php?wiki=XHTML - http://www.wikini.net/wakka.php?wiki=CSS

Menu déroulant accessible



Description


L'un des problèmes récurrents avec les menus déroulants et qu'ils empêchent les utilisateurs de naviguer au clavier, ce qui terme d'accessibilité, n'est pas ce qu'on fait de mieux. Aussi, ce tutoriel vous montre comment procéder en alliant un code xhtml sémantique, une feuille de style css ainsi qu'un script javascript. Que ce soit sous Firefox ou IE, vous pourrez dès lors vous servir de la tabulation pour naviguer sans souris.

Codes


page xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>Menu déroulant accessible</title> <link rel="stylesheet" type="text/css" media="screen" xhref="menu.css" /> <script type="text/javascript" xsrc="menu.js"></script> </head> <body> <div id="menu"> <dl> <dt>Menu 1</dt> <dd><ul> <li><a xhref="./">Lien 1</a></li> <li><a xhref="./">Lien 2</a></li> <li><a xhref="./">Lien 3</a></li> <li><a xhref="./">Lien 4</a></li> </ul></dd> </dl> <dl> <dt>Menu 2</dt> <dd><ul> <li><a xhref="./">Lien 5</a></li> <li><a xhref="./">Lien 6</a></li> <li><a xhref="./">Lien 7</a></li> <li><a xhref="./">Lien 8</a></li> <li><a xhref="./">Lien 9</a></li> <li><a xhref="./">Lien 10</a></li> </ul></dd> </dl> <dl> <dt>Menu 3</dt> <dd><ul> <li><a xhref="./">Lien 11</a></li> <li><a xhref="./">Lien 12</a></li> <li><a xhref="./">Lien 13</a></li> </ul></dd> </dl> <dl> <dt>Menu 4</dt> <dd><ul> <li><a xhref="./">Lien 14</a></li> <li><a xhref="./">Lien 15</a></li> <li><a xhref="./">Lien 16</a></li> <li><a xhref="./">Lien 17</a></li> <li><a xhref="./">Lien 18</a></li> <li><a xhref="./">Lien 19</a></li> <li><a xhref="./">Lien 20</a></li> </ul></dd> </dl> <script type="text/javascript"> <!-- //Utile pour ne pas voir les éléments dd apparaître au chargement de la page var oDd=document.getElementsByTagName('dd'),i=oDd.length-1;for(i;i>=0;i=i-1)oDd[i].style.display='none'; //--> </script> </div> </body> </html>
A noter que le script en fin de menu n'est pas obligatoire et peut donc être supprimé. Il sert uniquement à ne pas afficher les menus déroulés au chargement de la page, ce qui peut gêner certains d'entre vous... A vous de voir si vous le laissez ou non. ;-)

menu.css
* { padding: 0; border: 0; margin: 0; } body { font: 100% "Times New Roman", serif; background-color: #444; color: #FFF; } #menu { position: absolute; top: 0; margin: 40px; } #menu dl { margin: 0 2px; float: left; border: 1px solid #000; width: 166px; text-indent: 10px; } #menu dl dt { font-weight: bold; font-size: .9em; line-height: 1.3em; background-color: #555; color: #DDD; } #menu dl dd { border-top: 1px solid #000; } #menu dl dd ul { list-style-type: none; border-top: 0; line-height: 1.5em; } #menu dl dt a { background-color: #555; color: #DDD; text-decoration: none; display: block; width: 166px; height: 1.3em; cursor: default; } #menu dl dd ul li { font-weight: normal; font-size: .7em; line-height: 1.5em; } #menu dl dd ul li a { width: 166px; height: 1.5em; text-decoration: none; display: block; background-color: #FFF; color: #000; text-indent: 10px; cursor: pointer; } #menu dl dd ul li a:hover, #menu dl dd ul li a:focus { background: #DDD; }

menu.js
// Raccourci et création d'un objet var d = document, o = {}; // Définition des propriétés de l'objet o.Menu = { // Chargement du menu __Load__: function() { // On lance le test pour s'assurer du bon fonctionnement o.Menu.__Test__(); }, // Test d'existence des méthodes et de la syntaxe xhtml __Test__: function() { // Si l'une des méthodes du script n'est pas interprétée ou si le menu n'existe pas, on stoppe le script. if ( !d.getElementById || !d.getElementsByTagName || !d.createElement || !d.createTextNode || !d.getElementById('menu') || !d.getElementById('menu').setAttribute || !d.getElementById('menu').replaceChild || !d.getElementById('menu').appendChild || !d.getElementById('menu').getElementsByTagName('dl') ) return false; /* ----- Tests facultatifs et non exhaustifs de bon augure ^^ ----- ----- Les codes contenus dans la zone suivante peuvent ----- ----- être virés si vous êtes sûr de votre syntaxe xhtml. ----- */ // Une fois le premier test effectué, on définit les variables nécessaires. var iA, iB, iC, iD, oMenu = d.getElementById('menu'), oDl = oMenu.getElementsByTagName('dl'); // Pour chaque élément dl du tableau oDl, for ( iA = oDl.length - 1; iA >= 0; iA-- ) { // on récupère les éléments dt dans un tableau. var oDt = oDl[iA].getElementsByTagName('dt'); // Si le tableau oDt est vide, on stoppe le script. if ( !oDt ) return false; } // Pour chaque élément dl du tableau oDl, for ( iA = oDl.length - 1; iA >= 0; iA-- ) { // on récupère les éléments dd dans un tableau oDd. var oDd = oDl[iA].getElementsByTagName('dd'); // Si le tableau oDd est vide, on stoppe le script. if ( !oDd ) return false; // sinon else { // pour chaque élément dd du tableau oDd, for ( iB = oDd.length - 1; iB >= 0; iB-- ) { // on récupère les éléments ul dans un tableau oUl. var oUl=oDd[iB].getElementsByTagName('ul'); // S'il n'y a pas d'élément ul, on stoppe le script. if( !oUl ) return false; // sinon else { // pour chaque élément ul du tableau oUl, for ( iC = oUl.length - 1; iC >= 0; iC-- ) { // on récupère les éléments li dans un tableau oLi. var oLi = oUl[iC].getElementsByTagName('li'); // S'il n'y a aucun objet oLi, on stoppe le script. if( !oLi ) return false; // sinon else { // pour chaque élément li du tableau oLi, for ( iD = oLi.length - 1; iD >= 0; iD-- ) { // on récupère l'élément a dans un objet oA. var oA = oLi[iD].getElementsByTagName('a')[0]; // S'il n'y a pas d'objet oA, on stoppe le script. if( !oA ) return false; } } } } } } } /* ----- ----- ----- Fin des tests facultatifs de bon augure ^^ ----- ----- ----- */ // Une fois le test effectué, on initialise le menu. return o.Menu.__Init__(); }, // Méthode d'initialisation du menu __Init__:function() { // On définit les variables nécessaires. var iA, oMenu = d.getElementById('menu'), oDl = oMenu.getElementsByTagName('dl'); // On cache tous les éléments dd en lançant la méthode dédiée à cette tâche. o.Menu.__HideLists__(); // Pour chaque élément dl du tableau oDl, for ( iA = oDl.length - 1; iA >= 0; iA-- ) { // On récupère l'élément dt. var oDt = oDl[iA].getElementsByTagName('dt')[0]; // On crée un élément dt et un élément a var oNewDt = d.createElement('dt'), oA = d.createElement('a'), oTextA = d.createTextNode(''); // On définit les propriétés de l'objet oA // (récupération du noeud texte de l'élément dt pour définir celui de l'élément a) oA.setAttribute('href','#'); oTextA.data = oDt.firstChild.nodeValue; // On constitue l'arbre DOM en remplaçant l'élément dt du code xhtml // par celui qu'on vient de créer. oA.appendChild(oTextA); oNewDt.appendChild(oA); oDl[iA].replaceChild(oNewDt,oDt); // On définit des méthodes en fonction des actions de l'utilisateur. oA.onclick = o.Menu.__Discard__; oDl[iA].onmouseover = o.Menu.__MouseDisplay__; oA.onfocus = o.Menu.__TabDisplay__; oA.onkeypress = o.Menu.__TabDisplay__; } }, // Méthode d'affichage de l'élément dd lorsqu'on le survole. __MouseDisplay__:function() { // On cache tous les éléments dd en lançant la méthode dédiée à cette tâche. o.Menu.__HideLists__(); // On récupère l'élément dd de l'élément dl qu'on survole dans un objet. var oDd = this.getElementsByTagName('dd')[0]; // On affecte la propriété css "display: block;" à l'objet oDd (affichage) oDd.style.display = 'block'; // On cache l'élément dd lorsqu'on ne survole plus l'élément dl. this.onmouseout = o.Menu.__HideLists__; }, // Méthode d'affichage de l'élément dd lorsqu'il prend le focus. __TabDisplay__:function() { // On cache tous les éléments dd en lançant la méthode dédiée à cette tâche. o.Menu.__HideLists__(); // On récupère l'élément dd de l'élément dl qui a le focus dans un objet. var oDd = this.parentNode.parentNode.getElementsByTagName('dd')[0]; // On affecte la propriété css "display: block;" à l'objet oDd (affichage) oDd.style.display = 'block'; // On donne le focus au premier lien de l'élément dd traité. oDd.getElementsByTagName('a')[0].focus(); }, // Méthode de masquage des éléments dd __HideLists__:function() { // On définit les variables nécessaires. var iA, oDd = d.getElementById('menu').getElementsByTagName('dd'); // Pour chaque élément dd du tableau oDd, for (iA = oDd.length - 1; iA >= 0; iA-- ) { // On affecte la propriété css "display: none;" à l'objet oDd (masquage) oDd[iA].style.display = 'none'; } }, // Fonction d'annulation __Discard__:function() { // On annule l'action. return false; } }; // Une fois que le document est chargé en mémoire, on charge le script. window.onload=o.Menu.__Load__;

visualiser

En suivant le lien de visualisation, vous trouverez le code tel que présenté dans ce tuto (avec commentaires et tests facultatifs) ainsi qu'une version de développement (sans commentaires et avec tests facultatifs) et une dernière optimisée (sans commentaires, sans tests facultatifs et compressée).
Photo de angecolonna Message publié le mardi 18 juillet 2006 - 02h35 par angecolonna. En cada hombre honesto existe una semilla de Revolucionario... <http://www.e-equateur.com> - <http://www.jungaltour.com> <http://www.moniteurs-herault.com> - <http://www.akaoka.com> <http://www.accompagnateurs-volvestre.com> - <http://www.loisirs-foret
Salut Koala,
Et oui encore moi :) , non t'inquiètes pas c'est juste pour te dire
que cette publication est vraiment trés interressante.
Vraiment trés bon script.
J'ajouterais à la faveur de cette methode, le referencement, grave pb des menus entièrement gérés en javascript et qui ne sont pas suivi par les moteurs de recherches.
Or ici, on a bien tous nos liens en dur dont tout à fait visibles des moteurs...
Vraiment trés bien, bon boulot.
Le seul petit point qui me chiffonnait était l'espace sous le menu.
Après avoir tatoné un peu, j'ai pu bidouiller la feuille de style pour pouvoir afficher du texte normal juste en dessous du menu sans le contrarier, cela rend impeccable, et ce, sous IE comme sous Mozilla.
Vraiment bien, je m'en servirais sûrement trés bientôt sur un site.
Donc, Merci Koala.
Photo de koala64 Message publié le mardi 18 juillet 2006 - 07h59 par koala64. modérateur http://www.allhtml.com/forums/posts_list/topic:464469 - http://www.wikini.net/wakka.php?wiki=XHTML - http://www.wikini.net/wakka.php?wiki=CSS
Merci à toi aussi pour ton commentaire ! ^^

J'en déduis que tu as du prendre l'exemple en ligne et non une des versions que j'ai laissé sur cette page auquel cas j'ai effectivement mis une marge supérieure de 12em sur la div desc pour plus de clarté... A moins que tu ne parlais là de la marge de 40px que j'ai laissé sur le contour du menu ?

En tout cas, pour ceux que ce menu intéresse, il faut savoir que vous pouvez lui donner la mise en page que vous souhaitez. Si je trouve un peu de temps, je vous metterais quelques exemples de mise en forme...

Comme tu l'as justement souligné, angecolonna, le référencement n'en pâtit pas au même titre que l'accessibilité qui est nettement améliorée comparée à de nombreux autres menus déroulants... Pour peu qu'on respecte la syntaxe xhtml, il est inutile d'aligner la moindre ligne de code javascript pour s'en servir, tout se génère automatiquement.

Lorsque vous codez, si vous vous attachez à bien séparer la structure (xhtml) de la présentation (css) et du comportement (javascript), vous y gagnerez sur de nombreux points (souplesse d'utilisation, sémantique, accessibilité, référencement, etc...).

Bref, si vous rencontrez des difficultés pour l'adapter à votre site, n'hésitez pas à me contacter par MP. :-)

Encore merci... ;-)
Photo de nizouille Message publié le mercredi 19 juillet 2006 - 02h04 par nizouille.
Hello, il semblerait que le script désactive les fonctionnalités du script niftycube.
C'est assez dommage, dans la mesure où ce script est utilisé largement (ici même :) ) et dans la mesure où votre script semble très bien fait.

Merci de votre réponse rapide, j'aimerais l'implanter sur mon site

Nizouille
http://www.enseignons.be
Photo de koala64 Message publié le mercredi 19 juillet 2006 - 02h25 par koala64. modérateur http://www.allhtml.com/forums/posts_list/topic:464469 - http://www.wikini.net/wakka.php?wiki=XHTML - http://www.wikini.net/wakka.php?wiki=CSS
Salut,

Je pense, sans avoir tester, que c'est dû à ma variable var d = document; vu qu'on l'utilise tous les deux...

Le mieux, c'est de supprimer la déclaration puis de remplacer tous les d du script par document.
Photo de nizouille Message publié le mercredi 19 juillet 2006 - 02h47 par nizouille.
nope, ça ne marche pas .. :(
Pour le reste, y a-t-il selon une possibilité pour combiner ton script avec la technique des portes coulissantes ?

Merci pour ta première réponse rapide.
Photo de koala64 Message publié le mercredi 19 juillet 2006 - 07h55 par koala64. modérateur http://www.allhtml.com/forums/posts_list/topic:464469 - http://www.wikini.net/wakka.php?wiki=XHTML - http://www.wikini.net/wakka.php?wiki=CSS
Rebonjour,

Dans ma série de tests, je n'ai pas essayé tous les scripts qui existent pour savoir si çà fonctionnait avec ou non, j'en suis désolé. ^^

Le fait est que nous n'avons que cette variable d en commun et qu'à première vue, il n'y a pas d'autre source de conflit.

Concernant les portes coulissantes, pas de problème.

Si vraiment tu ne trouves pas, peux-tu poster sur le forum javascript en laissant un exemple avec les codes html, css et js ?

On ne va pas résoudre ce type de problème sur cette publication, ce n'est pas le but des commentaires. Le forum javascript est là pour çà.

Merci pour ta compréhension. ;-)
Photo de nizouille Message publié le mercredi 19 juillet 2006 - 09h14 par nizouille.
Non, je comprends bien sûr ^^ . Peut-être pourrais-tu rajouter NIftyCube dans ta prochaine série de tests ;) ? Ou regarder si le script, en changeant la variable d fonctionne (j'ai essayé avec doc par exemple, et ça ne fonctionnait pas)

Voici mes deux questions : http://www.allhtml.com/forums/posts_list/topic:500884
http://www.allhtml.com/forums/posts_list/topic:500883

Merci de ton aide, j'arrête de squatter cet (excellent) article ! ;)
Photo de koala64 Message publié le dimanche 23 juillet 2006 - 12h49 par koala64. modérateur http://www.allhtml.com/forums/posts_list/topic:464469 - http://www.wikini.net/wakka.php?wiki=XHTML - http://www.wikini.net/wakka.php?wiki=CSS
Pour ceux qui souhaiteraient aller un peu plus loin, je suis tombé sur ces liens:

Menu déroulant accessible partie 1
Menu déroulant accessible partie 2
Photo de tibolan Message publié le vendredi 28 juillet 2006 - 14h25 par tibolan.
Salut,

Vraiment bonne publication !
Efficace, propre et offerte toute prête, pour un débutant comme moi c'est du gâteau !

Y'a un seul petit hic, c'est que Opera 9.00 ne "déroule" pas les menus, plutot il les "réenroule" pas ! Par contre sur IE 7 & FF 2, pas de souci.

Quelqu'un sait de quoi ca vient ?

Merci encore, et merci d'avance...
Photo de koala64 Message publié le vendredi 28 juillet 2006 - 20h56 par koala64. modérateur http://www.allhtml.com/forums/posts_list/topic:464469 - http://www.wikini.net/wakka.php?wiki=XHTML - http://www.wikini.net/wakka.php?wiki=CSS
Salut,

Ayant testé le script sur Opera 9, je peux t'assurer que les menus se déroulent et s'enroulent correctement même sur ce navigateur. Le seul hic avec lui, c'est la navigation clavier qui ne fonctionne pas... ce pourquoi je ne l'ai pas ajouté dans la liste des navigateurs compatibles. D'ailleurs, tu peux noter que même si le javascript est désactivé, la navigation via la touche tab ne fonctionne pas non plus, ce qui montre bien que le soucis vient bien du navigateur et non du script... Apparemment, les concepteurs d'Opera ont réservé l'emploi de la touche tab aux champs texte et aux boutons, mais pas aux liens... drôle d'idée ! :s
Photo de tibolan Message publié le samedi 29 juillet 2006 - 06h59 par tibolan.
Merci de ta réponse, mais malheureusement, ça ne fonctionne pas chez moi !!!
A cause de quoi, je sais pas, peut-être un actiVeX ou un plugin manquant, j'ai installé Opera hier seulement...

Voilà l'adresse fautive :

http://tibolan.free.fr

Je continue de chercher....

Merci pour ton implication et dans le suivi des tes posts !
Photo de tibolan Message publié le samedi 29 juillet 2006 - 07h12 par tibolan.
C'est encore moi,

Est-ce que le fait que j'intègre ton code ds un <td> peut poser problème ?
Photo de tibolan Message publié le samedi 29 juillet 2006 - 07h21 par tibolan.
euh... allez une dernière fois !

Ca marche, j'ai juste déplacer le <div> et tout la partie html du code avant ma première balise <table> et miracle, ca deroule et ca enroule, bref c'est cool !!!

Faut p'tet que j'aille dormir moi ???
Photo de koala64 Message publié le samedi 29 juillet 2006 - 10h24 par koala64. modérateur http://www.allhtml.com/forums/posts_list/topic:464469 - http://www.wikini.net/wakka.php?wiki=XHTML - http://www.wikini.net/wakka.php?wiki=CSS
oui tibolan... :D

Juste une chose. Le forum des publications n'est pas dédié à la résolution des problèmes que vous pouvez rencontrer lorsque vous utilisez ces techniques. Les autres forums sont là pour çà et bon nombre de membres devrait pouvoir vous aider.

Si le soucis provient directement du code de la publication (et donc sans aucun ajout de code), n'hésitez pas à poster ici oui, mais si c'est lors de la mise en application sur votre site, et donc avec des risques d'interactions avec d'autres codes, please, n'intervenez pas sur les sujets de ce forum.

Merci pour votre compréhension. ;-)
Photo de zygwi Message publié le mercredi 30 août 2006 - 17h36 par zygwi.
Félicitation pour ce menu simple et efficace.
Mais je souhaiterais savoir s'il est possible d'inclure un lien dans l'entête d'un menu ?

Ex:
Menu 1 avec ses sous-menus, mais pouvoir donner la possibilité de cliquer directement sur "Menu 1" lui-même.

Merci d'avance !
Photo de koala64 Message publié le jeudi 31 août 2006 - 14h13 par koala64. modérateur http://www.allhtml.com/forums/posts_list/topic:464469 - http://www.wikini.net/wakka.php?wiki=XHTML - http://www.wikini.net/wakka.php?wiki=CSS
Bonjour,

Si c'est de simples liens que tu souhaites faire, ils y sont déjà (générés à la volée et visibles avec "voir le code source" puis "voir le code source généré" de la barre d'outils webdeveloper de Firefox). Je me suis contenté d'annihiler leur action pour ne pas perturber l'utilisateur.

Pour rétablir leur action, tu dois supprimer, dans le CSS, la propriété cursor du lien :
#menu dl dt a { cursor: default; }
pour retrouver le curseur habituel et, dans le script JS, supprimer la ligne :
oA.onclick = o.Menu.__Discard__;
ou bien remplacer o.Menu.__Discard__; par une fonction de ton choix.
Photo de zygwi Message publié le mercredi 06 septembre 2006 - 09h08 par zygwi.
Merci pour le tuyau !
J'ai remarqué un petit bug. Quand le menu déborde sur du texte ou autre champ "input", il disparait au profit du reste.
Résultat, impossible d'accéder aux menus.

Je pensais que jouer sur les "z-index" permettrait de faire apparaitre le menu en premier plan, mais non.
Si quelqu'un a une piste, je suis preneur !
Photo de koala64 Message publié le mercredi 06 septembre 2006 - 10h50 par koala64. modérateur http://www.allhtml.com/forums/posts_list/topic:464469 - http://www.wikini.net/wakka.php?wiki=XHTML - http://www.wikini.net/wakka.php?wiki=CSS
Bonjour,

Le CSS fournit est adapté à la page d'exemple et non à vos sites. Ne pouvant pas prévoir tous les cas de figure, ce code est justement là pour vous permettre d'y appliquer votre propre feuille de style sans avoir à retoucher le script. Il n'y a donc aucun bug. ;-)

La structure du menu est légèrement différente suivant que le JS est activé ou non. Sans JS, c'est le code XHTML qui fait foi. Lorsque le JS est activé, tu peux te servir de la barre d'outils webdeveloper de Firefox en cliquant sur "voir le code source" puis "voir le code source généré" pour le visualiser et adapter ton CSS en conséquence.
Photo de guillaumechx Message publié le mardi 19 septembre 2006 - 11h50 par guillaumechx.
Bonjour

Je suis a la recherche d'un script pour créer un menu déroulant, et Oh Joie je tombe sur ce tuto !!! :)

Ma question est: est ce possible de le centrer dans la page, ou est ce un positionnement absolu??

En attendant la réponse je vais "bricoler" pour voir s je peut l'exploiter...
Photo de koala64 Message publié le mardi 19 septembre 2006 - 13h59 par koala64. modérateur http://www.allhtml.com/forums/posts_list/topic:464469 - http://www.wikini.net/wakka.php?wiki=XHTML - http://www.wikini.net/wakka.php?wiki=CSS
Hello,

Effectivement, dans l'exemple proposé, le menu est positionné en absolu, ce qui n'empêche pas pour autant de le centrer via les marges négatives.

Voir entre autres :
Centrer les éléments ou un site web en CSS

Néanmoins, cette technique n'est adaptée que si le menu est inclus dans une mise en page fixe. Dans le cas, inverse, il est préférable de refaire le CSS pour ne pas risquer de rendre le menu inaccessible lorsque la largeur de la fenêtre est trop petite. La refonte du CSS est un peu ce que j'encourage à faire depuis le début, vu que je ne pouvais pas sortir un modèle adapté aux besoins de chacun. ;-)
Photo de jarodender Message publié le mercredi 10 janvier 2007 - 13h22 par jarodender. modérateur syntaxe wiki ALL HTML : http://www.allhtml.com/pages/aide_publication
Je n'ai pas testé le menu, mais nul doute que je le ferais,
d'après les commentaires, je pense qu'un des problèmes récurrent est lié à :
window.onload=o.Menu.__Load__;


Comme solutiion (non parfaite, mais c'est un début)

window.onload = chargeEvenement;

function chargeEvenement() {
o.Menu.__Load__;
externalLinks();
// et toute autre fonction dont vous auriez besoin
}
Photo de koala64 Message publié le mercredi 10 janvier 2007 - 13h51 par koala64. modérateur http://www.allhtml.com/forums/posts_list/topic:464469 - http://www.wikini.net/wakka.php?wiki=XHTML - http://www.wikini.net/wakka.php?wiki=CSS
Rebonjour, ^^

En effet, le onload, ce n'est pas le top... Le fait de mettre une fonction englobante permet déjà de pouvoir en affecter plusieurs autres, ce qui n'est pas possible autrement avec ce gestionnaire d'événement.

Si on veut pousser plus loin, il faut recourir aux gestionnaires d'événements DOM-2 type addEventListener ou attachEvent (pour IE)

L'avantage des onmachinchose (DOM-0), c'est qu'ils sont compatibles quelquesoit le navigateur.
Leur désavantage est qu'ils monopolisent l'événement sur un élément donné.

L'avantage de addEventListener et attachEvent (DOM-2) est qu'ils peuvent se cumuler pour un événement unique sur un même élément.
Leur désavantage est qu'ils sont difficiles à mettre en oeuvre (malgré que ce soit les recommendations du W3C... la faute à qui ? ... IE qui ne fait pas comme tout le monde...)
Le fonctionnement est radicalement différent entre addEventListener et attachEvent ce qui oblige à créer de nombreuses fonctions prenant en compte les différents cas possibles...

J'en touche quelques mots ici :

http://css.alsacreations.com/Tutoriels-JavaScript/bonnes-pratiques-javascript#event

Un bon cours en français se trouve là :

http://www.gchagnon.fr/cours/dhtml/evenements.html

et le must, c'est par ici :

http://www.quirksmode.org/js/introevents.html

2 bons bouquins sur le sujet :

Beginning JavaScript with DOM Scripting and Ajax (EN) et PPK on Javascript (EN)
voir ici : http://forum.alsacreations.com/topic-5-17057-1-Livres-de-reference-Javascript.html

PS : Je suis actuellement en train de développer un nouveau menu pour le tuto d'Alsacréations... Il prendra en compte à peu près les mêmes contraintes que celui de FairyTells avec une petite surprise en plus... mais patience... Je suis très lent... :p
Photo de han09 Message publié le vendredi 05 décembre 2008 - 17h47 par han09.
je vous remercie infiniment, han09

liste des forums liste des discussions Participer à la discussion

Vous devez obligatoirement vous identifier en tant que membre pour participer à cette discussion.

ACCÉS COMMUNAUTÉ

Mot de passe perdu

Rejoignez ALL HTML

Publiez vos articles, actualités, communiqués ... Donnez votre avis, partagez votre réseau, rencontrez d'autres membres et participez à la vie de la communauté.

Créer un compte

Les 5 dernières discussions