Discussion :

[An0nyme]

Salut,

Je ne comprend pas trop d'où vient mon erreur, sous Firefox ça fonctionne mais pas sous IE alors que justement c'est un script que j'ai fait pour apprendre à IE la pseudo-propriété CSS hover dans certains cas.
Le truc c'est que quand je survole une ligne (avec le curseur) ça change la style de toutes mes cellules à l'intérieur de la ligne.

Les lignes sont créées par php à partir d'un modèle et ça pose des problèmes pour des techniques simples (changer la classe de la ligne avec onMouseover="this.class='otherclass';" ou simplement la couleur de fond ne fonctionne pas, quelque soit la ligne survolée ça ne l'applique qu'à la première).

Voici ce que j'ai dans les balises head :

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
18
19
20
21
22
23
24
25
26
27
28
29
30
<script type="text/javascript">
/* Script créé par An0nyme, <a href="http://****" target="_blank">http://****</a>, apprend la pseudo-propriété CSS "hover" à IE pour la liste des sous-forums. Vous pouvez librement utiliser ce script pour votre forum *****. */
// Définissez les paramètres de base, colorH est la couleur à afficher quand la souris passe par-dessus la ligne et colorN est la couleur d'affichage normal, nbreForums est le nombre de forums présents sur l'index (le nombre de lignes).
colorN = '#EFEFEF';
colorH = '#000000';
nbreForums = 5;
 
function getoutstyle() {
 for (n=0; n<(nbreForums*5); n++) {
   document.getElementsByName('td')[n].style.backgroundColor = colorN;
 }
}
function line() {
 for (z=0; z<document.getElementsByName('tr').length; z++) {
   document.getElementsByName('tr')[z].id = 'a'+z;
 }
}
function ogstyle(id) {
 // recopiez et incrémentez cette ligne autant de fois que vous avez de forums.
 if (id == "a0") { var ligne = 0; }
 if (id == "a1") { var ligne = 1; }
 if (id == "a2") { var ligne = 2; }
 if (id == "a3") { var ligne = 3; }
 if (id == "a4") { var ligne = 4; }
 if (id == "a5") { var ligne = 5; }
 for (i=(5*ligne); i<(5+5*ligne); i++) {
   document.getElementsByName('td')[i].style.backgroundColor = colorH;
 }
}
</script>

Et le HTML :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
  <!-- BEGIN forumrow -->
 <tr name="tr" onMouseover="line();id=this.id;ogstyle(id);" onMouseout="getoutstyle();">
	<td class="row1" align="center" valign="middle" height="50" name="td"><img src="{catrow.forumrow.FORUM_FOLDER_IMG}" width="46" height="25" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></td>
	<td class="row1" width="100%" height="50" name="td"><span class="forumlink"> <a href="{catrow.forumrow.U_VIEWFORUM}" class="forumlink">{catrow.forumrow.FORUM_NAME}</a><br />
	  </span> <span class="genmed">{catrow.forumrow.FORUM_DESC}<br />
	  </span><span class="gensmall">{catrow.forumrow.L_MODERATOR} {catrow.forumrow.MODERATORS}</span></td>
	<td class="row2" align="center" valign="middle" height="50" name="td" ><span class="gensmall">{catrow.forumrow.TOPICS}</span></td>
	<td class="row2" align="center" valign="middle" height="50" name="td"><span class="gensmall">{catrow.forumrow.POSTS}</span></td>
	<td class="row2" align="center" valign="middle" height="50" nowrap="nowrap" name="td"> <span class="gensmall">{catrow.forumrow.LAST_POST}</span></td>
 </tr>
 <!-- END forumrow -->

Fonctionne sous FF mais affiche sous IE : "valeur Null ou n'est pas un objet" pour "document.getElementsByName(...)[...].style".

Je me demandais ce qui n'allait pas, puis au passage je n'arrivais pas à incrémenter automatiquement mes lignes répétitives du genre : " if (id == "a0") { var ligne = 0; }".

J'avais essayé :

Code :

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

1
2
3
while (y<document.getElementsByName('tr').length) {
 if (id == 'a'+y) { var ligne = y; }
}

Mais sans succès, avez-vous une autre solution?

[jln13]

salut,

ton probleme vient de ta fonction "line".
Le document.getElementsByName('tr').length te retourne toujours 0 sous internet explorer.

Apres recherche, il semble que getElementsByName ne fonctionne qu'avec les balises de formulaire (select, input..), d'ou ton probleme. Il faut utiliser les document.getElemetById pour les autres balises..

Je pense qu'il faudrait que tu repenses ta facon de faire parce que ton code est bien complique pour juste changer la couleur de fond d'une ligne d'un tableau... Genre definir deux css, une normale et une hover.. et hop le tour est joue.. sans javascript ! :o)