OnClick nuovo

**ingegno** · 03-11-2003, 12:10

Pur cercando nel forum non sono riuscito a risolvere il mio problema su OnClick.
Il mio codice è il seguente:
<td id="cella1" bgColor="#E7CBD2" style="HEIGHT: 10px" align=middle onclick="cella1.bgColor='yellow'; homepage.htm">
<a href="homepage.htm">

HOMEPAGE</p>
</a></font>
</td>
</tr>
<tr>
<td height="1" align=middle id="cella2" onclick="cella2.bgColor='#B56668'; cella1.bgcolor='#FFB9DC'">
pippo</td>
</tr>
<tr>

Il mio intento sarebbe quello di fare in modo che le celle acquisiscano il link e che con l'evento onclick lo sfondo della cella cambi colore per evidenziare all'utente la pagina che sta visitando per poi tornare al colore originario una volta riclickato su un altro link la cui cella cambierà colore di sfondo e così via.

**Mich_** · 03-11-2003, 12:49

Non ho capito cosa vuoi fare, ma ti posto la sintassi corretta delle parti da te evidenziate:

<td id="cella1" style="height:10px; background-color:#E7CBD2; align: middle;" onclick="this.style.backgroundColor='yellow'; parent.NOMEFRAME.location.href='homepage.htm';">

Non ho capito cosa ci stava a fare quel homepage.htm, per cui ho interpretato come un cambio di location in un altro frame.

Nota: ho messo tutta la formattazione dentro lo stile (e` piu` corretto).
Nota2: le parole chiave dentro lo style e dentro il JS sono leggermente diverse.

Ciao
Michele

**biamat** · 03-11-2003, 12:56

Ciao,
ti propongo questa soluzione alternativa che mi sembra molto più generale della tua, infatti è applicabile senza sforzo ad un numero X di celle. Questo piccolo js colora la cella appena cliccata e decolora quella che era precedentemente attiva.

<script>
var old_attiva = null;
function attiva(id)
{
document.getElementById(id).style.backgroundColor= 'yellow';
if(old_attiva!=null)
{
document.getElementById(old_attiva).style.backgrou ndColor='#E7CBD2';
}
old_attiva = id;
}
</script>
<body>
<table>
<tr>
<td id="cella1" bgColor="#E7CBD2" style="HEIGHT: 10px" align=middle onclick="attiva(this.id)">
<a href="#">

HOMEPAGE</p>
</a></font>
</td>
</tr>
<tr>
<td height="1" bgColor="#E7CBD2" align=middle id="cella2" onclick="attiva(this.id)">
pippo</td>
</tr>
<tr>
</table>
</body>

Dimmi se intendevi una cosa del genere.

**ingegno** · 03-11-2003, 13:01

Grazie per avermi risposto

Quello che intendo fare è:
avere il link ad una pagina cliccabile su tutta la cella che lo contiene;
cambiare il colore di sfondo della cella appena si clicca sopra per evidenziare che si sta visitando quel link cliccato, e quindi quando si torna su un altro link quello che è stato appena visitato avrà il colore originario dello sfondo della cella che lo contiene.
Infatti l'homepage(che non è divisa in frame) conterrà all'interno di una cella abbastanza grande varie pagine tante quanti sono i link da clickare per visitarle.

**biamat** · 03-11-2003, 13:06

allora la mia funzione fa il suo dovere!

Per dare l'idea che tutta la cella sia cliccabile applicagli uno stile con --> cursor: pointer;

**ingegno** · 03-11-2003, 13:17

Mi funziona ma non riesco ad applicarlo al mio volere.
Perdona la mi ascarsa conoscenza ma al posto dei cancelletti posso inserire l'indirizzo della mia pagina giusto? E come faccio a dare a tutta la cella la funzione di link cliccabile?
Col codice che mi hai inviato non riesco a cliccare le celle per attivare il link per la visita all'altra pagina.

**Massimo61** · 03-11-2003, 13:25

Ciao

<td id="cella1" bgColor="#E7CBD2" style="corsor:hand; HEIGHT: 10px" align=middle onclick="attiva(this.id); location.href='pagina.htm'">

Massimo

**ingegno** · 03-11-2003, 13:57

Stranamente le celle non riescono ad acquisire la proprietà di link.
Vorrei poter anche fare in modo che al solo passaggio del mouse le celle cambino il colore dello sfondo.
Questo è il code:
<script language="javascript">
var old_attiva = null;
function attiva(id)
{
document.getElementById(id).style.backgroundColor= 'yellow';
if(old_attiva!=null)
{
document.getElementById(old_attiva).style.backgrou ndColor='#E7CBD2';
}

old_attiva = id;
}
</script>
</head>
<body>
<table>
<tr>
<td id="cella1" bgColor="#E7CBD2" style="HEIGHT: 10px; cursor: hand" align=middle onclick="attiva(this.id)" onMouseMove="this.style.backgroundColor='orange'"; onhref='homepage.htm'">
<a href="homepage.htm">

HOMEPAGE</p>
</a></font>
</td>
</tr>
<tr>
<td height="1" bgColor="#E7CBD2" align=middle id="cella2" style="cursor: hand" onclick="attiva(this.id); href='pippo.htm'">
pippo</td>
</tr>
<tr>
</table>

**Massimo61** · 03-11-2003, 14:05

Ciao

A me funziona.

Prova questo:

<style>
.o1 {background-color:red;cursor:hand;color:white;}
.n {background-color:white;}
</style>

<table border=1>
<tr>
<td class="n" onMouseOver="this.className='o1' "onMouseOut="this.className='n'" style="cursor:hand" Onclick="location.href='http://www.libero.it/'">Testo</td>
</tr>
</table>

Massimo

**CYberpunkSystemOne** · 03-11-2003, 14:34

<a href="homepage.htm">

HOMEPAGE</p>
</a></font>
</td>
</tr>

..dove lo apri il font?....

Discussione: OnClick nuovo

Strumenti discussione

Ricerca discussione

Visualizza

OnClick nuovo

Permessi di invio