RollOver / Tableau et IE

Version imprimable

bonjour à tous...
Alors je vais vous exposer mon problème
Je suis entrain de faire un tableau. Pour améliorer sa lecture, je mets surbrillance la ligne survolé avec la souris. Chaque ligne est composée de plusieurs cellules dont les fonds est une image.(Arrondi gauche, milieu, Arrondi droit).
Pour mon rollover j’utilise un hover est un sélecteur enfant sur les balises TR t TD.
Code:

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 tr { background-color:transparent;} td { background-color:transparent; text-align:left; } .left { height:25px; width:8px; background:right url(icones/line_back_left.png) no-repeat; } tr:hover > .left { background:right url(icones/line_back_left_over2.png) no-repeat; } .middle { background:left url(icones/line_back_mid.png) repeat-x; height:25px; } tr:hover > .middle { background:left url(icones/line_back_mid_over2.png) repeat-x; } .right { background:left url(icones/line_back_right.png) no-repeat; height:25px; width:8px; } tr:hover > .right { background:left url(icones/line_back_right_over2.png) no-repeat; }
ça fonctionne nickel sous Firefox mais sous IE ça coince ... j'ai cherché mais rien trouvé de concluant... donc si vous avez une idée lumineuse...

d'Avance merci

16/08/2007, 21h09
Bisûnûrs

La lumière viendra du Javascript.

La pseudo-classe hover ne fonctionne sur IE6 uniquement sur des liens.
17/08/2007, 08h30
Atomicfryer

Arff c'est bien ce que je craignais ...

Cependant en continuant mes recherches, j’ai trouvé une méthode pour passer ce pb avec un BEHAVIOR…
Ou bien comme tu le dis mettre en place une méthode en javascript :?

Et la j'avoue n'avoir aucune idée de comment faire...
17/08/2007, 08h48
Bisûnûrs

Code:

<tr onmouseover="this.style.background='#f00'" onmouseout="this.style.background='#ff0'" style="background:#ff0">

oui en effet mais comme tu peux le constater dans mon CSS, j'ai trois fond different appliqué à mes balises TD, et pour que tout se change d'un coup, j'utilise un rollover sur la balise TR...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
.left { background:right url(icones/line_back_left.png) no-repeat;}
tr:hover> .left { background:right url(icones/line_back_left_over2.png) no-repeat;}
.middle { background:left url(icones/line_back_mid.png) repeat-x;}
tr:hover> .middle { background:left url(icones/line_back_mid_over2.png) repeat-x;}
.right { background:left url(icones/line_back_right.png) no-repeat;}
tr:hover> .right { background:left url(icones/line_back_right_over2.png) no-repeat;}
 
<tr>
  <td class="left">&nbsp;</td>
  <td class="middle">&nbsp;</td>
  <td class="right">&nbsp;</td>
</tr>

Dans ce cas-là fais comme ça :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function overLine(objTr){
   var tds = objTr.getElementsByTagName('td');
 
   tds[0].className = 'over';
   tds[1].className = 'overMiddle';
   tds[2].className = 'over';
}
 
function outLine(objTr){
   var tds = objTr.getElementsByTagName('td');
 
   tds[0].className = 'left';
   tds[1].className = 'middle';
   tds[2].className = 'right';
}

Code:

<tr onmouseover="overLine(this)" onmouseout="outLine(this)">

Et rajoute deux classes over à ton CSS :

Code:

1
2
3
4
5
6
.over{
   background:left url(icones/line_back_right_over2.png) no-repeat;
}
.overMiddle{
   background:left url(icones/line_back_right_over2.png) repeat-x;
}

17/08/2007, 09h47
Atomicfryer

Haaa ... hé bien voila ce qu'il me manquait...
La structure des tableaux html en javascript...

En effet c'est très clair comme ça...
Merci beaucoup Bisûnûrs !