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

**Super_baloo8** · 19/04/2007, 19h12

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 !

**LEK** · 19/04/2007, 21h57

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 :

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

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!

Invité · 19/04/2007, 22h23

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 !

**Super_baloo8** · 20/04/2007, 00h22

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 :

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

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 :

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
<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="#" ?

**Super_baloo8** · 20/04/2007, 00h24

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.

**Fabrice ROUXEL 1** · 20/04/2007, 01h48

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 :

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

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>

**Super_baloo8** · 20/04/2007, 09h41

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

**SpaceFrog** · 20/04/2007, 09h57

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 ...

**Super_baloo8** · 20/04/2007, 10h23

Envoyé par SpaceFrog

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

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

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.

**SpaceFrog** · 20/04/2007, 10h54

recupération de tous les h2 de contenu:

Code :

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

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

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

Code :

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

document.createElement('a')

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

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

JavaScript

Discussions similaires

Partager

Partager