Discussion :

[CheepCheep]

Bonjour,

Je suis débutante en javascript donc soyez tolérants d'il vous plait

Ma page est composée de deux division. La première contient un tableau avec des mot clés tandis que la seconde contient un texte (ce dernier contenant les mots clés en question).

Je souhaite que lorsque je passe la souris sur un mot clé du tableau, ledit mot clé soit surligné dans le texte.

J'ai déjà trouvé du code qui me semble exploitable :

Code :

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

1
2
3
4
5
6
 
function surbrillance(ou,quoi){
	var StrReg="("+quoi+")";
	var Reg=new RegExp((StrReg),"gi")
	ou.innerHTML= ou.innerHTML.replace(Reg,'<span style="background-color:#53C5FE;">$1</span>')
}

Le problème, c'est que je ne sais pas comment écrire qu'il ne faut surligner le mot contenu dans la balise td (id=tableMot) dans le texte contenu dans une division (id=texteDoc) seulement au passage de la souris sur la balise td citée ci-dessus.

Voilà, j'espère m'être exprimée clairement. Merci !

[Loceka]

Admettons que ton tableau de mot clef ressemble à ça :

Code html :

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

1
2
3
4
<table>
  <tr><td>mot clef 1</td></tr>
  <tr><td>mot clef 2</td></tr>
</table>

Il sufft dans ce cas de rajouter un appel vers ta fonction surbrillance (qu'il faudra un peu modifier) dans un événement onmouseover :

Code html :

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

1
2
3
4
<table>
  <tr><td onmouseover="surbrillance('mot_clef_1')">mot_clef_1</td></tr>
  <tr><td onmouseover="surbrillance('mot_clef_2')">mot_clef_2</td></tr>
</table>

Par contre on ne peut pas lui passer l'argument "ou" de ta fonction surbrillance, il faudra que tu te débrouilles pour le récupérer autrement (on peut passer en argument un ID par exemple).

[SylvainPV]

Code html :

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

1
2
3
4
5
6
7
8
<table id="motsCles">
  <tr><td>mot_clef_1</td></tr>
  <tr><td>mot_clef_2</td></tr>
</table>
 
<p id="texte">
Texte avec mot_clef_1 à surligner
</p>

Code js :

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
var motsCles = document.querySelectorAll("#motsCles td");
var texte = document.getElementById("texte");
var texteInitial = texte.innerHTML;
 
for(var m=0; m<motsCles.length; m++){
    (function(motCle){
            motCle.addEventListener("mouseover", function(){
               surbrillance(texte, motCle.innerText);
            });
             motCle.addEventListener("mouseout", function(){
               texte.innerHTML = texteInitial;
            });
    })(motsCles[m]);
}
 
function surbrillance(ou,quoi){
	var StrReg="("+quoi+")";
	var Reg=new RegExp((StrReg),"gi")
	ou.innerHTML= ou.innerHTML.replace(Reg,'<span style="background-color:#53C5FE;">$1</span>')
}

Code non testé, mais l'idée est là.

edit: testé et débuggé :
http://jsfiddle.net/2ANhQ/

[CheepCheep]

Merci beaucoup a tout les deux =)

J'ai rencontré un second bug, je test ce que vous m'avez dis dés que j'ai finis !

[CheepCheep]

Impeccable !! ='D

Merci beaucoup, ça marche du tonnerre !! Bonne journée !!

[hackoofr]

il y a ceci aussi http://www.permadi.com/tutorial/cssHighlightTableRow/

[CheepCheep]

Merci, à vrai dire j'ai un dernier petit problème mais je ne sais pas si on peut y faire grand chose... FireFox ne supporte visiblement pas la fonction javascript (c'est moche à dire mais ça marche sous IE...) ^^"

[Geoffrey74]

je pense que le soucis vient de innerHTML qui ne fonctionne que sous IE.

[NoSmoking]

Bonjour,

je pense que le soucis vient de innerHTML qui ne fonctionne que sous IE.

c'est bel et bien crossBrowser

[SylvainPV]

Merci, à vrai dire j'ai un dernier petit problème mais je ne sais pas si on peut y faire grand chose... FireFox ne supporte visiblement pas la fonction javascript (c'est moche à dire mais ça marche sous IE...) ^^"

Oui pardon, ça vient de innerText.

Code :

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

surbrillance(texte, motCle.innerText || motCle.textContent);

Ca devrait fonctionner partout maintenant.
http://jsfiddle.net/2ANhQ/1/

[Loceka]

Ceci dit, le mieux est de se passer de innerHTML et innerText et d'utiliser les objets DOM pour ça.

C'est un peu plus long à écrire mais c'est pas la mer à boire non plus (même si dans le cas présent ça peut être un peu complexe). Ou alors passer par du jQuery.

[SylvainPV]

Dans le cas présent, on manipule des bouts de texte et non des éléments HTML. L'utilisation de innerText et innerHTML me paraît donc appropriée. Et jQuery n'apporterait pas grand chose au problème.