[DOM] Création de lien dans des balise en place

Version imprimable

19/04/2007, 19h12
Super_baloo8

[DOM] Création de lien dans des balise en place

Bonjour et excusez moi de vous dérangez, mais je n'arrive pas à trouver de script javascript que me permettent de faire ce que je souhaite.

Je suis, comme on dis, un newbie dans la programmation javascript, j'ai pas mal de mal à le comprendre.

J'èspère que vous allez pouvoir m'aider.

Sur cette page, j'ai du contenu qui est masqué par javascript, puis lorsque que l'on clique sur les logo, le contenu s'ouvre.

Le problème, c'est que si on navigue au clavier, il est impossible d'ouvrir les contenu.

Donc pour résoudre ce problème, il faudrais que je crée automatiquement des liens en javascript dans les balises <h2>.

Vous allez me dire pourquoi ne pas les mettre à la main ? Tout simplement car si le javascript est inactif, ca ne sert à rien du tout d'avoir des liens à cet endroit.

Merci pour votre aide !
19/04/2007, 21h57
LEK
Si c'est vraiment ce que tu veux faire alors tu n'as qu'à générer directement tes liens et tes balises avec javascript :
Code:

1 2 document.write("<h2><a href='#'>Here is my logo!</a></h2>");
Mais côté accessibilité, il y a mieux... L'idée étant d'essayer de conserver l'ergonomie que l'utilisateur ait ou non désactiver javascript!
19/04/2007, 22h23
Invité

Pour afficher ton contenu masquer, tu utilise surement un appel de fonction grace à onClick. Pour que ça fonctionne avec la navigation au clavier, il faut doubler cet appel avec onFocus (même évènement que onClick mais lors d'une sélection au clavier, s'emploie de la même façon).

Bonne chance !

Citation:
Envoyé par LEK
Si c'est vraiment ce que tu veux faire alors tu n'as qu'à générer directement tes liens et tes balises avec javascript :
Code:

1 2 document.write("<h2><a href='#'>Here is my logo!</a></h2>");
Mais côté accessibilité, il y a mieux... L'idée étant d'essayer de conserver l'ergonomie que l'utilisateur ait ou non désactiver javascript!
Ca aurais tellement simple de faire ça comme ça. Mais si javascript désactivé, plus de titre.

Sinon je pourrais très bien faire :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <h2> <scrip type="text/javascript"> //<![CDATA[ document.write("<a href='#'>"); //]]> </script> <img src="source.jpg" alt="logo source" /> <scrip type="text/javascript"> //<![CDATA[ document.write("</a>"); //]]> </script> </h2>
Mais ca serais très lourd, il n'y a t'il pas moyen de dire pour chaque texte compris entre la balise H2, contenu dans la div#contenu , créer un lien href="#" ?

20/04/2007, 00h24
Super_baloo8

Citation:

Envoyé par sbooob

Pour afficher ton contenu masquer, tu utilise surement un appel de fonction grace à onClick. Pour que ça fonctionne avec la navigation au clavier, il faut doubler cet appel avec onFocus (même évènement que onClick mais lors d'une sélection au clavier, s'emploie de la même façon).

Bonne chance !

J'utilise la librairie Jquery pour obtenir les effet de hide/show avec glissement. J'ai pu le réaliser en lisant ce tutorial sur le net.

Je suis vraiment naze en js.

En javascript, tu as à disposition les événements suivant:
- onKeyDown
- onKeyPress
- onKeyUp

On leurs associe, de manière classique, un gestionnaire d'évenement.
Une chose à savoir, c'est qu'il existe un objet Event qui est automatiquement créé par le navigateur puis transmis en paramètre au gestionnaire d'évenement.

Cela offre l'opportunité de gérer les touches pressées.
Attention les propriétés de l'objet Event différent suivant les navigateurs et leurs versions.
Soit Event e.
1/ Sous Firefox on a e.charCode qui contient le code Ascii de la touche appuyée.
2/ Sous IE c'est e.keyCode qui contient l'entier représentant ce code Ascii.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <html> <script type="text/javascript"> document.onkeypress = keypressHandler; function keypressHandler(e){ e = e || window.event; if (event.keyCode == 13){ // touche entrée // code spécifique return true; } } </script> <body> </body> </html>

20/04/2007, 09h41
Super_baloo8

Merci pour ces précision Fabrice, (moi c'est Sylvain)

Je prefererais ne pas avoir à définir de touches à la place de l'utilisateur.

Si je ne trouve pas un autre moyen j'essairais d'appliquer celui là.

Merci pour ton aide en tout cas ;)
20/04/2007, 09h57
SpaceFrog

Citation:

Mais ca serais très lourd, il n'y a t'il pas moyen de dire pour chaque texte compris entre la balise H2, contenu dans la div#contenu , créer un lien href="#" ?

oui ça c'est possible, mais pourquoi href="#" ??

fuis le document.write comme la peste et utilise plutot le DOM ...
20/04/2007, 10h23
Super_baloo8

Citation:

Envoyé par SpaceFrog

oui ça c'est possible, mais pourquoi href="#" ??

Tout simplement pour avoir une consistence dans le lien pour le javascript.

Citation:

Envoyé par SpaceFrog

fuis le document.write comme la peste et utilise plutot le DOM ...

Tu me parles chinois ;)

Comme coder en Dom ? Existe t'il une manière simple ?

Sinon, je vais mettre résolu pour l'instant, finalement un lien dans le dur n'est pas si mal que ça.
20/04/2007, 10h54
SpaceFrog

recupération de tous les h2 de contenu:

Code:

var mesH2=document.getElementsById('contenu').document.getElementsByTagName('h2');

ensuite il suffit pour cahque h2 de créer un a avec

Code:

document.createElement('a')

de lui coller un href, de lui appende le h2 et d'appender le tout dasn contenu ...