Discussion :

[Atomicfryer]

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 :

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

[Bisûnûrs]

La lumière viendra du Javascript.

La pseudo-classe hover ne fonctionne sur IE6 uniquement sur des liens.

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

[Bisûnûrs]

Code html :

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

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

[Atomicfryer]

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 :

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

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>

[Bisûnûrs]

Dans ce cas-là fais comme ça :

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
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 html :

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

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

Et rajoute deux classes over à ton CSS :

Code css :

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

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;
}

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