cambia bg-color e text-color nei TD

[klauzz]

raga, mi servirebbe uno script da applicare ai TD.

ho tre TD, tutti e tre con bgcolor Grigio con testo Nero.

vorrei che al "rollover" sui TD, il testo diventasse Bianco e il Bgcolor Nero.

mentre al click, che il testo diventasse rosso e il bgcolor Bianco.

L'effetto su ogni TD deve disabilitare gli altri 2, mi spiego:
se faccio click sul primo e poi sul secondo, il primo si deve disabilitare e quindi ritornare al suo colore originario (bgcolor Grigio con testo Nero)

Mi date una mano?
Ne ho proprio tanto bisogno...
postatemi anche qualche link utile se potete...

un saluto a tutti da
KLAUZZ

[Mich_]

Se vuoi una cosa portabile, devi usare i CSS:

<td class="riposo" onmouseover="this.className='attivo';" onmouseout="this.className='riposo';"> scrivi qui</td>

Naturalmente ci devono essere nel CSS le due classi attivo e riposo, con le proprieta` che vuoi:
Nella head:
<style ...>
.attivo { background-color: black; color: white; }
.riposo { background-color: white; color: black; }
</style>

Nota: ci sono altri metodi per farlo con i CSS.

Ciao
Michele

[klauzz]

si, ma con i css non posso risolvere il mio problema...

io l'avevo fatto con i css, ma non funzia a dovere, mi spiego:
al click sul bottone il pulsante assume lo style designato per l'"onclick", ok, ma se faccio click in un qualsiasi altro punto del sito, mi si disattiva lo style.

E' da qui ke pensavo ad una soluzione di tipo javascript, per ovviare a questo problema... ma non so come farlo...

[klauzz]

il problema più grosso, è il fatto che avendo più TD, l'azione sul primo deve disabilitare il secondo e i successivi, e credo che questo possa farlo solo un javascript...

[Mich_]

Ma l'hai provato?

Il metodo che t'ho dato utilizza JS per cambiare lo stile da applicare. Si puo` anche cambiare solo uno o piu` elementi dello stile (ma si usano comunque i CSS):

<td style="background-color:white; color:black;" onmouseover="this.backgroundColor='black'; this.color='white';" onmouseout="this.backgroundColor='white'; this.color='black';"> scrivi qui</td>

Attenzione alla sintassi e soprattutto alle maiuscole: vanno lasciate esattamente cosi`.

Ciao
Michele

[klauzz]

ok, mich, prova questo mio esempio... ho bisogno di una customizzazione:

nell'head metti questo:

<style>
.over { background-color: black; color: white; }
.out { background-color: white; color: black; }
.in { background-color: white; color: red; }
</style>

e nel body:

<table>
<tr>
<td class="out" onmouseover="this.className='over';" onmouseout="this.className='in';">HOME</td>
<td class="out" onmouseover="this.className='over';" onmouseout="this.className='in';">MAIL</td>
<td class="out" onmouseover="this.className='over';" onmouseout="this.className='in';">FORUM</td>
</tr>
</table>



ho bisogno che l'utente, clicchi su una cella, e quella cella rimanga selezionata nello style "in", e fin qui funzia,
ma quando vado su un'altra cella la cella precedente rimane nello stato "in" e io vorrei che torni nello stato "out".

Lo scopo di questa mia ricerca, è che vorrei applicarlo ad un menù per far si che l'utente, dopo aver cliccato sulla pagina, capisca in che pagina si trova... mi capisci?

fammi sapere
KLAuzz

[Mich_]

Allora la cosa e` un pelo piu` complessa.
Se vuoi intercettare anche il click e vuoi che rimanga, ti occorre una variabile JS che "ricordi" l'ultimo click.

<td class="out" onmouseover="this.className='over';" onmouseout="this.className=(ult==0)?'in':'out';" onclick="this.className='in';ult=0;">HOME</td>

<td class="out" onmouseover="this.className='over';" onmouseout="this.className=(ult==1)?'in':'out';" onclick="this.className='in';ult=1;">MAIL</td>

<td class="out" onmouseover="this.className='over';" onmouseout="this.className=(ult==2)?'in':'out';" onclick="this.className='in';ult=2;">FORUM</td>

Occorre anche che nella head della pagina ci metti un JS dove definisci la variabile ult (fuori dalle funzioni):

<script ...>
var ult = -1;
</script>

Cosi` dovrebbe andare, ma provalo.

Ciao
Michele

[klauzz]

ciao Michele!

innanzitutto ti ringrazio per lo sbattimento e l'interessamento.

stavolta ci sei andato vicinissimo, ma manca ancora qualcosa a questo script:

lo script intercetta l'ultimo pulsante, ma per far resettare gli altri bisogna che passi "on rollover" su tutti... provalo anche tu.

clicco sul primo e si colora di rosso, sul secondo e si colora ancora di rosso, ma in questo modo ne ho ancora 2 colorati di rosso, ma non appena passo on rollover sui 2 pulsanti, il primo si resetta e l'ultimo selezionato rimane giusto...

[Mich_]

Hai ragione.

Ho difficolta` a provare in questo momento, dato che sto facendo altre cose e nonho un sistema di test attivo.

Allora nei vari blocchi ci metti:
onclick="colora(N);"
dove N e` il numero assegnato al blocco (0, 1, 2).

Poi fai una funzione da mettere dentro lo script di cui sopra:

function colora(n) {
  document.getElementById('blocco"+ult).style.className = 'out';
  document.getElementById('blocco"+n).style.className = 'in';
  ult = n;

mentre l'HTML diventa:
<td id="blocco0" class="out" onmouseover="this.style.className='over';" onmouseout="this.style.className=(ult==0)?'in':'ou t';" onclick="colora(0)">HOME</td>

ecc.
(nota che ho aggiunto un "style." in alcuni oggetti.

Prova a vedere se va bene.

Ciao
Michele

[klauzz]

ciao Michele,

l'ho testato stamattina e Homesite mi dà un errore nello script...
magari prova a testarlo quando puoi...
io aspetto fiducioso...
questo script mi serve una cifra...

grazie ankora di tutto
un saluto da

KLAuzz