Cella di una tabella che si evidenzia.

[davide.pirovano]

Ciao a tutti,

ho il seguente problema:

sul mio sito ho una tabella, vorrei che quando un utente sale col mouse su una cella il bordo di questa oppure il suo sfondo si colori.

Mi serve per dare l'idea che l'utente sta per selezionare l'opzione in quella cella.

Immagino si tratti di una cosa semplice...ma mi sto perdendo.

Se qualcuno può aiutarmi lo ringrazio anticipatamente.

[Kreatore]

si, la cosa è semplice.
assegna una classe alla cella, la cosa ti serve se non hai un id assegnato alla tabella quindi con i css la modifichi

es.

<table id="tab_uno">
  <tr>
    <td class="colonna1">Testo colonna 1</td>
    <td class="colonna2">Testo colonna 2</td>
    <td class="colonna3">Testo colonna 3</td>
  </tr>
</table>

quindi il css

...
#tab_uno{border:1px solid #666; background:#666;}
#tab_uno colonna1{background:#ffc; margin:1px;}
#tab_uno colonna2{background:#fcf; margin:1px;}
#tab_uno colonna3{background:#cff; margin:1px;}
#tab_uno td:hover{background:#fff;}
...

ok?

[salasir]

Credo però che questa soluzione, pur validissima e funzionante altrove) sia impraticabile su IE che non gestisce l'HOVER se non sul tag "A"

[edy72]

Non so se è il modo corretto, cmq con I.E. e FireFox funziona:
il cambiamento del colore di sfondo lo faccio tramite Javascript e il DOM che mi permettono di modificare al volo lo stile di un elemento.
Tutte le celle, però devono essere contraddistinte da un ID.

questo l'html

<table id="tab_uno">
 <tr>
    <td id="colonna1" onmouseover="document.getElementById('colonna1').style.background='#F00';"  onmouseout="document.getElementById('colonna1').style.background='#FFF';">Testo colonna 1</td>
    <td id="colonna2" onmouseover="document.getElementById('colonna2').style.background='#F00';"  onmouseout="document.getElementById('colonna2').style.background='#FFF';">Testo colonna 2</td>
    <td id="colonna3" onmouseover="document.getElementById('colonna3').style.background='#F00';"  onmouseout="document.getElementById('colonna3').style.background='#FFF';">Testo colonna 3</td>
  </tr>
</table>

e questo il css

#tab_uno{border:1px solid #666; background:#666;}
#tab_uno #colonna1, #tab_uno #colonna2, #tab_uno #colonna3
{background:#FFF; margin:1px;}

fammi sapere se riesci a combinare.

Ciao!!!

[Kreatore]

la tua soluzione è valida, però piuttosto complicata e poco accessibile.
tieni presente che fai lavorare di + il client, e non funziona se uno ha disabilitato js.
La soluzione da applicare alla proposta da me fatta sopra è quella di inserire un behaviors
cioè assegnare un comportamento usato solo da IE.

Spiegato da xs4all trovate la soluzione adatta.

[davide.pirovano]

Beh ragazzi grazie davvero a tutti. Ho usato questa soluzione:

<td width="40" align="center" bgcolor="#ffffff" onmouseover="style.backgroundColor='#ff0000'"

avevo aperto per sbaglio um messaggio anche nella sezione ASP.. mi hanno risposto li... vi ho risportato la soluzione.

Ciao.

[edy72]

Kreatore,

grazie per la segnalazione: ho già messo i due link tra i miei Segnalibri e adesso vado a studiarmi i behavior.

ciao!!