onmouseover e sfondo cella

**noodles25** · 25-05-2008, 12:55

Ciao a tutti, ho bisogno di una mano.
Ho una tabella con in fila delle immagini con le bandiere per la scelta della lingua.

Allora devo fare in modo tale che al passaggio del mouse su un link (che è l'immagine stessa e una parola) mi cambi immagine (OK) e che mi cambi il colore dello sfondo della cella dove risiede (NON VA)

Guardate solo onmouseover, con l'immagine "italiano" funziona, con il td "pippo" no

codice:

<td name="pippo"  style="text-align: center; width: 20%;">
<a class="linkimmagine" href="ita/pagina2.html"
onmouseover="italiano.src='icone/ita.jpg';
pippo.style.backgroundColor='yellow';" 
onmouseout="italiano.src='icone/sita.jpg';">
[img]icone/sita.jpg[/img]

ITA</a>
</td>

se mettessi l'evento onmouseover dentro il tag td facendo this.style.backgroundColor='yellow'; ovviamente funziona

dove sbaglio?

**noodles25** · 26-05-2008, 12:16

non sapete aiutarmi?

dovrebbe funzionare, no?

**cavicchiandrea** · 26-05-2008, 12:42

Originariamente inviato da noodles25
non sapete aiutarmi?

dovrebbe funzionare, no?

Fai cosi:

codice:

<a class="linkimmagine" href="ita/pagina2.html"
onmouseover="italiano.src='icone/ita.jpg';
document.getElementById('pippo').style.backgroundColor='yellow';" 
onmouseout="italiano.src='icone/sita.jpg';">

e aggiungi l'ID al <td id="pippo">

**noodles25** · 26-05-2008, 12:51

perfetto. grazie mille

**Shadd** · 26-05-2008, 17:19

Se devi cambiare il colore di sfondo della cella quando il puntatore ci va sopra conviene usare il CSS al posto del JavaScript, sia perché è più leggero sia perché non c'è bisogno di avere abilitato il JScript nel browser.

basta creare una proprietà CSS come segue:

codice:

<td class="pippo"></td>

codice:

td.pippo{background: yellow;}

**mld** · 13-06-2008, 14:30

Riprendo questo post perché la mia necessità è solo quella di cambiare il colore della celletta al passaggio del mouse. Meglio usare "onmouseoever" di JS o agire tramite css?

<body class="bordercolor">
<table>
<tr><td class="menu">pagina 1</td>
...
</tr></table>

e il foglio css:
.bordercolor { background-image: ... ; }

.corpo { COLOR: #ffffff; }
.corpo:link { COLOR: #ffffff; }
.corpo:visited { COLOR: #ffffff;}
.corpo:hover { COLOR: #000000; background: Yellow ; }
.corpo:active {COLOR: #ff0000; }

.menu { background-color: #000000; }

Aggiungendo la riga in rosso modifico lo sfondo solo per il tratto sotto la scritta "pagina1" ma per modificare il colore dell'intera celletta ("menu") è meglio farlo con onmouseover o c'è modo di farlo senza usare JS agendo solo sui css?
Grazie

**Xinod** · 13-06-2008, 14:53

la pseudoclasse css :hover e' disponibile per qualsiasi elemento su tutti i browser moderni,
con l' eccezione di IE6 e IE7 (per quest ultimo se il documento non ha strict doctype) dove quindi l' hover e' applicabile solo su <a>

questo vuol dire che con un doctype strict puoi scrivere nel css la regola
.classeCella:hover {background-color:#f00;}
e funzionera' ovunque tranne in IE6

per risolvere puoi,
- o usare una delle librerie/framework, per esempio qui una soluzione per prototype, ma ne troverai gia' pronte per le piu' diffuse librerie
- o una piccola libreria apposita chiamata IE7
che fa comportare IE6 come IE7 (con buona approssimazione)
- o questo behavior, che copre solo l' :hover in IE6

ultima ipotesi, fartelo da solo, se hai tempo/voglia e conoscenze adeguate

ciao

Discussione: onmouseover e sfondo cella

Strumenti discussione

Ricerca discussione

Visualizza

onmouseover e sfondo cella

Permessi di invio