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

[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...) ^^"

[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/