Celle cliccabili

[Raw Materials]

Ciao a tutti... sapete dirmi come faccio a rendere cliccabile un'intera cella di una tabella e far si che, una volta sopra col mouse, tutto il testo al suo interno cambi colore?
Per ora ho solo:

<td style="cursor: hand">

che serve solo a far cambiare cursore al mouse e

A:link, A:visited, A:active {
	text-decoration: none;
	color: white;
}

A:hover {
	text-decoration: none;
	color: yellow;
}

che mi cambia colore al testo ma è applicabile solo al tag A e non al TD... sapreste darmi qualche dritta? Grazie!

[SimoneVB]

Ciao
direi che con gli stili puoi arrivare fino ad un certo punto,
dopo di chè hai bisogno di ricorrere al JavaScript.
Prima di tutto: lo stile per il cursore, così come lo
hai specificato, non funzia su Netscape 7. E' probabile che
ti convenga ricorrere ad un foglio di stile esterno (un file css)

L'idea che ho avuto (che ho provato e funzia) è questa:

Definisci due classi per i due differenti stili della cella
(puoi farlo anche nel documento HTML)


<STYLE>
/* Definisco Stile1 e Stile2 da usare per la cella */
.Stile1 {
COLOR: Black;
CURSOR: Hand
}

.Stile2 {
COLOR: Navy;
CURSOR: Hand
}
</STYLE>


Quando scrivi il codice HTML per la cella in questione, devi
aggiungere l'attributo class e specificare lo stile iniziale.
Aggiungi anche un'attributo ID. Questo servirà al JavaScript
per identificare la cella in questione.


<TD ID = "cella" CLASS = "Stile1"
onMouseOver="JavaScript:ChangeClass('cella', 'Stile2');"
onMouseOut="JavaScript:ChangeClass('cella', 'Stile1');">
Testo della cella
</TD>


Come puoi notare, ho assegnato l'ID "cella" e lo stile della classe "Stile1" alla cella.
Ho inoltre indicato quale funzione JavaScript eseguire in risposta agli eventi onMouseOver e onMouseOut che si verificano sulla cella.
A questa funzione viene passato l'ID della cella ('cella') e
il valore da assegnare all'attributo CLASS ('Stile1' o 'Stile2') ossia la classe dello stile da applicare.

Eccoti il codice della funzione JavaScript:


<SCRIPT>
function ChangeClass(ElementId, NewClass)
{
document.getElementById(ElementId).className = NewClass;
}
</SCRIPT>


Come vedi è semplicissimo: la funzione riceve l'ID della cella e il nome della classe da applicare allo stile, referenzia la cella grazie al suo ID e assegna alla proprietà
className il nome della nuova classe.

Spero di esserti stato d'aiuto.
Ciao
Simo

[biblo]

<td onclick="javascript:location='nome_pagina.htm'">

[Jerry Masslo]

a {display:block;
color:white;
text-decoration:none;
height:100%
}

a:hover {color:yellow;
background:blue
}


ho aggiunto un background altrimenti non si nota poi il cursor sui link ci va di suo su pointer e non su hand che è non standard

[Raw Materials]

Per ora ho provato il consiglio di Jerry Masslo; si avvicina molto alla mia idea ma mi dà qualche problema di visualizzazione... in pratica mi prende il contenuto del tag A nella cella e me lo sbatte al "top" di questa.
Guardate qui..

SimoneVB, ti sei dimenticato di scrivermi il collegamento all'oggetto (è un mp3, non una pagina web)... devo aggiungere quello che dice Biblo?

[Jerry Masslo]

guardare cosa? c'è un bel po' di miscuglio di roba e sinceramente non li uso anzi un po' mi fanno senso

se fai un disegno di cosa vorresti si può vedere di aggiustare il tiro

[SimoneVB]

SimoneVB, ti sei dimenticato di scrivermi il collegamento all'oggetto (è un mp3, non una pagina web)... devo aggiungere quello che dice Biblo?

collegamento a cosa ?

Ciao a tutti... sapete dirmi come faccio a rendere cliccabile un'intera cella di una tabella e far si che, una volta sopra col mouse, tutto il testo al suo interno cambi colore?

[Raw Materials]

Ok, più o meno ce l'ho fatta a combinare qualcosa... ho creato un po di stili poi ho aggiunto alla cella nell'HTML:

<td class="back_down1 div8"
onMouseOver="this.className='back_down3 div8 go_down';"
onMouseOut="this.className='back_down1 div8';"
onClick="javascript:location='mp3/Raw Materials - Blues 2.mp3';">
Scarica</td>

Però c'è un problema... per i browser che eventualmente non supportano javascript volevo anche aggiungere la stringa:

Scarica

ma essendoci già nella pagina un foglio di stile che fa cambiare colore ai link

A:link, A:visited, A:active {
	text-decoration: none;
	color: white;
}

A:hover {
	text-decoration: none;
	color: yellow;
}

va come in conflitto con lo stile che ho creato sopra e non mi fa cambiare colore alla scritta quando vado sopra alla cella, ma solamente quando sono sopra alla scritta stessa. Come posso raggirare questo problema? Spero di essere stato chiaro :master: .

[biblo]

<a href="url/">
<span style="color: #000000; text-decoration: underline;">
Scarica</span></a>



<a href="url/">
<span style="color: #000000; text-decoration: none;">
Scarica</span></a>

[Jerry Masslo]

non comprendo come si preferisca javascript a ciò che può farsi coi css

però più strano era che non ti servisse il cambio di sfondo per accentuare il link su tutta la cella, mentre vuoi che la cella cambi colore anche quando non è sul link che potrebbe anche disorientare perché se cambia colore dà idea che ci sia un link

però hai una tua idea di ciò che vorresti e non si discute

coi css ad esempio potresti fare un rollover su tutta la cella link anche cambiando testo cioè potresti fare un rollover di bottoni con cambio testo colori e sfondo, si usa uno span e uno switch di hover