problème CSS/javascript avec FF mais pas IE

[Erreip]

Salut,

Je voulais réutiliser (pomper ? ) un effet CSS/javascript de ce forum, à savoir celui qui met toute une ligne d'un tableau d'une couleur différente quand la souris passe dessus. J'ai donc visité discrètement les sources javascript et CSS mais je n'arrive pas à reproduire l'effet ... Je ne suis pas aussi doué qu' OLab quoi !

J'ai repris la fonction javascript "highlightRow"

Code : Tout sélectionner

function highlightRow(row, onFlag) {
	var tdNodes = row.childNodes;
	for (var i=0; i<tdNodes.length; i++) {
		var tdNode = tdNodes[i];
		if (tdNode.nodeType != 3) { // type 3 => #text
			if (onFlag) {
				tdNode.className = tdNode.className + "over";
			} else {
				var overPos = tdNode.className.indexOf("over");
				tdNode.className = tdNode.className.substring(0,tdNode.className.length-overPos);
			}
		}
	}
}

Mais sans "if (tdNode.nodeType != 3)" car je n'ai pas trop compris à quoi ça sert ...

Et j'ai bien mis dans mon CSS les noms des class, chez moi "td2" et "td2over".

Et le problème c'est que ça ne marche pas sous FF, mais ça fonctionne avec IE. Quand je dis que ça ne marche pas, c'est à dire que ça marche bien au début mais si je repasse trop la souris sur la ligne, il n'y a plus d'effet CSS, de mise en page, etc ... car je me retrouve avec des noms de class du type "td2overover" ... Le javascript à l'air de mal marcher.

Donc est-ce qu'il y a un truc à faire pour FF ? Vous avez une idée ? Parce que ça marche très bien sur ce site, avec IE et FF alors j'aurais voulu savoir à coté de quoi j'étais passé ...

Merci d'avance !

Note : entre mes balises <td> ... </td>, j'ai du java, un truc du genre

Code : Tout sélectionner

<tr onmouseover="javascript: highlightRow(this,true);" onmouseout="javascript: highlightRow(this,false);">
<td class="td2">Nom :</td>
<td class="td2"><%= nom %></td>
</tr>

Vous croyez que ça peut faire foirer le truc ?

[pascal]

on a pas besoin de javascript dans FF pour faire un effet de survol des cellules :

td {color:red;}
td:hover {color:blue}

Sinon j'avoue avoir la flemme de tester ton javascript

[Erreip]

Ouaip, je connais td:hover. Mais là, je voudrais faire changer de couleur toutes les cellules d'une ligne en même temps et pas uniquement la cellule où se trouve la souris ... Mais peut être qu'en essayant de l'intégrer au javascript ? Je ne sais pas, je vais tester ...

Sinon j'ai changé un peu le truc en

Code : Tout sélectionner

<tr class="td2" onmouseover="this.className='td2over'" onmouseout="this.className='td2'">
	<td>Nom</td>
	<td><%= nom %></td>
</tr>

Et ça marche un peu mieux. Ce qui ne vas pas maintenant c'est que parfois FF ne détecte pas la sortie de la souris des cellules et donc reste en "td2over" au lieu de repasser en "td2" !


Et rendons à César ce qui est à Césard, ce n'est pas mon script mais celui d'OLab !

[JuTs]

Ouaip, je connais td:hover. Mais là, je voudrais faire changer de couleur toutes les cellules d'une ligne en même temps et pas uniquement la cellule où se trouve la souris

eh bien fais tr:hover . Par contre, ça ne fonctionnera pas avec IE

[olab]

Coucou,

Tu mets donc

Code : Tout sélectionner

onmouseover="highlightRow(this, true);" onmouseout="highlightRow(this, false);"

sur les tr où tu veux l'effet.

Tu mets ce code javascript

Code : Tout sélectionner

function highlightRow(row, onFlag) {
	var tdNodes = row.childNodes;
	for (var i=0; i<tdNodes.length; i++) {
		var tdNode = tdNodes[i];
		if (tdNode.nodeType != 3) { // type 3 => #text
			if (onFlag) {
				tdNode.className = tdNode.className + "over";
			} else {
				var overPos = tdNode.className.indexOf("over");
				tdNode.className = tdNode.className.substring(0,tdNode.className.length-overPos);
			}
		}
	}
}

Le type 3 est fait parce que lorsque tu parcours les noeuds fils du TR il y a des noeuds de type text qui trainent et auquel il ne faut pas mettre la classe CSS.

Enfin dans ta css tu définis

Code : Tout sélectionner

/****************** Row highlighting ********************/
.row1over, .row2over, .row3over {
	background-color: #e0e8f2;
	border-top: 1px solid #2e62aa;
	border-bottom: 1px solid #2e62aa;
}

Voilà et ça fonctionne, normalement
O

[Erreip]

Merci d'être passé

Bon, ben c'est exactement ce que je fais .... mais ça ne marche pas !
En fait c'est le javascript qui ne marche pas bien : il ne m'enlève pas correctement le "over" ce qui fait que je me retrouve avec des noms de class bizarre ...

Merci pour vos réponses en tout cas, je vais essayer de bidouiller et je viendrai vous dire si je trouve ce qui ne va pas ...