script per cambiare sfondo

[Pietro84]

ciao a tutti,
vorrei cambiare il backgroundcolor di una cella la passaggio del mouse...come posso fare?

[pierofix]

Di una cella specifica o di un gruppo di celle?

[Pietro84]

di una riga di una tabella

[pierofix]

Se è per una riga sola puoi fare così:

XHTML

<tr id="evidenziare">


CSS

.evidenziare:hover,
.evidenziare_hover
{
   background-color:red;
}


Javascript

window.onload = function()
{
   var riga = document.getElementById('evidenziare')

   riga.onmouseover = function()
   {
      this.className = 'evidenziare_hover'
   }
   riga.onmouseout = function()
   {
      this.className = ''
   }
}

Lo script javascript è necessario solo se l'effetto deve essere visto anche su Internet Explorer. L'ideale sarebbe servire lo script solo e solamente a tale browser, mediante magari commenti condizionali.

[floyd]

lo stile dovrebbe essere #evidenziare:hover se assegni un id

[pierofix]

Ah sì, scusa, ero andato troppo di fretta. Rettifico:

XHTML

<tr id="evidenziare">


CSS

#evidenziare:hover,
.evidenziare_hover
{
   background-color:red;
}


Javascript

window.onload = function()
{
   var riga = document.getElementById('evidenziare')

   riga.onmouseover = function()
   {
      this.className = 'evidenziare_hover'
   }
   riga.onmouseout = function()
   {
      this.className = ''
   }
}

Grazie floyd.

[Pietro84]

ho fatto come avete detto ma nn funge:

<Style Type="TEXT/CSS"> 

#tabella1
.tabella1
{
   background-color:white;    
}
#tabella1:hover
.tabella1_hover
{
    background-color:red;
}

</Style>

window.onload = function()
{
   var riga = document.getElementById('tabella1')

   riga.onmouseover = function()
   {
      this.className = 'tabella1_hover'
   }
   riga.onmouseout = function()
   {
      this.className = 'tabella1'
   }
}


//poi nella riga
echo "<tr id='tabella1' bgcolor='$color'>"; 

[pierofix]

Non hai messo le virgole a saparare i selettori CSS. Guarda bene cosa avevo scritto io.

P.S. Lo standard odierno prevede che tutti i nomi dei marcatori e degli attributi siano scritti in minuscolo: cerca di seguire almeno queste regole basilari.

[Pietro84]

ok grazie perfetto

ma se volessi che quando ci si clicca rimane selezionato?

[pierofix]

CSS

#evidenziare:hover,
.evidenziare_hover,
.evidenziare_selezionato
{
   background-color:red;
}


Javascript

window.onload = function()
{
   var riga = document.getElementById('evidenziare')

   riga.onmouseover = function()
   {
      this.className = 'evidenziare_hover'
   }
   riga.onmouseout = function()
   {
      if ( this.className.indexOf('evidenziare_selezionato') == 0 )
      {
         this.className = ''
      }
   }
   riga.onclick = function()
   {
      this.className = 'evidenziare_selezionato'
   }
}

Mmm, stiamo cominciando a buttare dentro troppe cose alla rinfusa. Se ti interessa un meccanismo snello e intelligente è il caso che tu ci dia un quadro generale e completo della pagina.