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 :
<script type="text/javascript">
/* Script créé par An0nyme,
http://****, 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')
.style.backgroundColor = colorH;
}
}
</script>
Et le HTML :
<!-- 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é :
while (y<document.getElementsByName('tr').length) {
if (id == 'a'+y) { var ligne = y; }
}
Mais sans succès, avez-vous une autre solution?