[Javascript] Effetto Rollover su riga di tabella

28-08-2007, 20.00.07

Salve :D
premetto che ho scarsissime basi di javascript, e ho un dubbio....
So che esiste un modo per cambiare il css di una classe o di un id nella pagina al passaggio del mouse, quindi volevo dirvi cosa volevo realizzare:

ho una tabella, ad esempio

Codice HTML:

<table>
 <tr class="a"> ..... </tr>
 <tr class="b"> .... </tr>
 <tr class="a"> .... <tr/>
</table>

le righe della tabella hanno i colori alternati, ad esempio bianco,nero,bianco etc... hanno una classe alternata quindi a,b,a,b,a,b etc etc...

esiste un modo per far si che quando passo il mouse su una riga della tabella, l'intera riga cambi colore di sfondo? ma solo quella riga intendo, non tutta la sua classe, sapete come fare ?

Ospite · 28-08-2007, 20.05.15

Codice HTML:

<tr class="a" onmouseover="this.style='background-color: #colore;'">

**dreadnaut** · 28-08-2007, 20.07.36

oppure nel css

Codice:

tr:hover {
  background: #colore;
}

solo che su IE6, ovviamente, non funziona

28-08-2007, 20.07.55

Originalmente inviato da probid

Codice HTML:

<tr class="a" onmouseover="this.style='background-color: #colore;'">

cavolo è piu facile di quanto pensassi...
non sapevo si potesse usare "this"....
grazie mille

Originalmente inviato da dreadnaut

oppure nel css

Codice:

tr:hover {
  background: #colore;
}

solo che su IE6, ovviamente, non funziona

Meglio una soluzione compatibile allora :D

Ospite · 28-08-2007, 20.09.15

[aggiungo] oppure:

Codice HTML:

<tr onmouseover="this.style.background = '#colore'">

Oppure nel css:

Codice HTML:

a:hover{
background: #colore;
}

Questo, che assomiglia molto allo script di dreadnaut, praticamente fa la stessa cosa, ma si riferisce alla classe a invece che a tutti i tr della pagina.

28-08-2007, 20.17.15

hhm non funziona... sbaglio qualcosa?
ecco il codice (in php perche le righe le stampo con un ciclo while)

Codice PHP:


       echo "<tr class=\"$classe\" onMouseOver=\"this.style='background-color: #ffffff';\"><td width=\"50px\">".$i."</td><td width=\"450px\">".$row['autore']."</td><td width=\"100\"><span class=\"link\">$pulsante</span></td><td width=\"100px\">".creatempo($row['tempo']). "</td></tr>";

Ospite · 28-08-2007, 20.19.59

Prova così:

Codice PHP:


echo "<tr class=\"$classe\" onMouseOver=\"this.style.background='#ffffff'\"><td width=\"50px\">".$i."</td><td width=\"450px\">".$row['autore']."</td><td width=\"100\"><span class=\"link\">$pulsante</span></td><td width=\"100px\">".creatempo($row['tempo']). "</td></tr>";

28-08-2007, 20.24.10

Originalmente inviato da probid

Prova così:

Codice PHP:


echo "<tr class=\"$classe\" onMouseOver=\"this.style.background='#ffffff'\"><td width=\"50px\">".$i."</td><td width=\"450px\">".$row['autore']."</td><td width=\"100\"><span class=\"link\">$pulsante</span></td><td width=\"100px\">".creatempo($row['tempo']). "</td></tr>";

Si funziona!
Argh però si colorano tutte di bianco e non tornano normali...
uso onmouseout per rimetterle apposto?

Ospite · 28-08-2007, 20.25.30

Si, basta che fai così:

Codice PHP:


echo "<tr class=\"$classe\" onMouseOver=\"this.style.background='#ffffff' onMouseOut=\"this.style.background=''\"><td width=\"50px\">".$i."</td><td width=\"450px\">".$row['autore']."</td><td width=\"100\"><span class=\"link\">$pulsante</span></td><td width=\"100px\">".creatempo($row['tempo']). "</td></tr>";

28-08-2007, 20.34.32

Originalmente inviato da probid

Si, basta che fai così:

Codice PHP:


echo "<tr class=\"$classe\" onMouseOver=\"this.style.background='#ffffff' onMouseOut=\"this.style.background=''\"><td width=\"50px\">".$i."</td><td width=\"450px\">".$row['autore']."</td><td width=\"100\"><span class=\"link\">$pulsante</span></td><td width=\"100px\">".creatempo($row['tempo']). "</td></tr>";

Ok funziona, grazie mille :D
interessante sto javascript...

EDIT: aspetta, no non va bene, con firefox funziona tutto, ma in IE
contando che le mie righe hanno colori alternati, non appena io passo il mouse su una riga e lo tiro fuori funziona, se lo faccio su quella con l'altro colore, prima assume il colore hover, e poi non ritorna con il colore originale, ma e come se fosse trasparente!

28-08-2007, 20.52.32

prova con onmouseover="this.backgroundColor='#code';" e poi onmouseout....
dimmi se così funziona ciao

28-08-2007, 20.56.10

Originalmente inviato da NetSkin

prova con onmouseover="this.backgroundColor='#code';" e poi onmouseout....
dimmi se così funziona ciao

Veramente nel frattempo ho provato ad arrangiarmi ed ho fatto cosi:

Codice:

<head>
  <script language="JavaScript" type="text/javascript">
   function no_download()
	  {
		 alert('Download not available until <?php echo $data["finale"]; ?>');
		}
		
	 function tr_over(classe,evento)
	  {
      evento.style.background='#555655';
		}
		
	 function tr_out(classe,evento)
	  {
		 if (classe == 'a')
      evento.style.background='#333333';
		 else
		  evento.style.background='#404040';
		}
  </script>
 </head>

Poi dentro la pagina...

Codice:

onmouseover="tr_over('$classe','this')" onmouseout="tr_out('$classe','this')"

Discussione: [Javascript] Effetto Rollover su riga di tabella

LinkBack

Strumenti discussione

Display

[Javascript] Effetto Rollover su riga di tabella

Regole di scrittura