Javascript onmouseover

martedì 01 novembre 2005 - 12.51

Elenco Threads

Stanze Forum

Aggiungi ai Preferiti

Cerca nel forum

Giovanni26 Profilo | Newbie

25 messaggi | Data Invio: mar 1 nov 2005 - 12:51

Ciao,
come si va a cambiare il background-color di una riga in una tabella con css?
Un breve esempio forse spiega meglio la cosa:
<style>
.riga
{
font-size:10px;
font-family:Tahoma;
cursor:hand;
color:red;
text-decoration:none;
text-align:left;
background-color:#EDEDED;
}
.col
{
font-size:10px;
font-family:Tahoma;
cursor:hand;
color:black;
text-decoration:none;
text-align:center;
background-color:#C0C0C0;
}

</style>
<script language="javascript">

function DynaTableOnMouseOver(obj){
Back=document.getElementById(obj).style.background;
document.getElementById(obj).style.background = '#FDE7B1';
}

function DynaTableOnMouseOut(obj){
document.getElementById(obj).style.background = 'transparent';
document.getElementById(obj).style.classname='riga';
}
</script>

</head>

<body>

<table border="0" width="100%" cellspacing="1" cellpadding="0" style="border-collapse: collapse" id="table1">
<tr >
<td align="center">col1</td>
<td align="center">col2</td>
<td align="center">col3</td>
<td align="center">col4</td>
<td align="center">col5</td>
<td align="center">col6</td>
<td align="center">col7</td>
</tr>
<tr ID="R1" class="riga" onmouseover=DynaTableOnMouseOver('R1') onmouseout=DynaTableOnMouseOut('R1')>
<td id='Col1' >1</td>
<td id='Col2' class="col" >2</td>
<td id='Col3'>3</td>
<td id='Col4'>4</td>
<td id='Col5'>5</td>
<td id='Col6'>6</td>
<td id='Col7'>7</td>
</tr>
</table>

Quando vado sopra la riga con il mouse mi viene cambiato il background-color ma non riesco più a ripristinarlo quando faccio mouseout. Infine, se la colonna ha uno style non viene cambiato il colore su mouseover.

Grazie mille a tutti.
Ciao

GvnnRules Profilo | Senior Member

436 messaggi | Data Invio: mar 1 nov 2005 - 20:17

Ciao,
io di solito faccio in un modo diverso, dichiaro 2 classi, una x la riga a stato normale e una x quando c'è il mouse sopra. Poi nel javascript cambio la classe ...

Riga tabella

<tr class="tableRow" onMouseOver="cmsChangeRowClass(this);" onMouseOut="cmsChangeRowClass(this);">

Javascript per il cambio

function cmsChangeRowClass(objRow){
switch(objRow.className){
case 'tableRow':
objRow.className = 'tableRowSelected';
break;
case 'tableRowSelected':
objRow.className = 'tableRow';
break;
}
}

Peace
Gvnn

Giovanni26 Profilo | Newbie

25 messaggi | Data Invio: mar 1 nov 2005 - 20:43

Grazie,
ci avevo provato ma non mi funzionava. In efetti così è molto meglio. Ci riprovo usando il tuo esempio.
Ciao

Torna su

Stanze Forum

Elenco Threads

Partecipa anche tu! Registrati!

Hai bisogno di aiuto ?
Perchè non ti registri subito?

Dopo esserti registrato potrai chiedere
aiuto sul nostro Forum oppure aiutare gli altri

Consulta le Stanze disponibili.

Registrati ora !