colorare link

[hw.master]

Ciao a tutti,

ho provato a cercare nel forum ma non sono venuto a capo di niente.

vorrei sapere se è possibile avere una funzione del genere legata al tag a href che definisce un link:

1 quando clicco sul link cambia colore
2 quando clicco su un link diverso dal precedente cliccato il precedente torna al colore originale e quello cliccato cambia colore.

una qualche funzione che mi permetta di i colori dei link senza css.

in modo da ottenere qualcosa del genere per i link
pippo

dove colora "colora" solo il link cliccato e decolora "decolora" tutti gli altri link.

Una terza cosa sarebbe quella di poter definire il colore di un link all'apertura della pagina e poi continuare a seguire la logica citata. una cosa del tipo su un link prefissato

pippo


Mi accontenterei di poter avere almeno la base per risolvere i primi due

Grazie.

HW

[Mich_]

Attenzione all'ordine:

onClick="Decolora(); Colora('livello1');"

Dove Decolora() toglie il colore a tutti (tramite un loop) e Colora mette il colre al livello passato.

La cosa migliore e` usare i CSS, modificati tramite JS:

function Colora(idd) {
  document.getElementById(idd).style.backgroundColor = 'ABCDEF';
}

function Decolora() {
  var liv;
  for (var i=0; i<MAX; i++) {
    liv = 'layer'+i;
    document.getElementById(liv).style.backgroundColor = 'ffffff';
  }
}

Ho suposto che i vari livelli fossero dei <div>.

Per il resto delle domande, la cosa e` compessa da spiegare in teoria. Implementa le routine qui sopra, organizza bene il tutto e poi ne riparliamo.

Ciao
Michele

[hw.master]

Grazie mille Michele,

per l'ottimo punto di partenza.

Verifico, sistemo e poi posto il codice e vediamo come è possibile risolvere il problema.

Grazie.

HW

[hw.master]

Scusa mich_,

ma quando dici "La cosa migliore e` usare i CSS, modificati tramite JS:"
intendi dire che sarebbe meglio creare due, tre stili css e assegnarli dinamicamente tramite js al link nel caso sia selezionato o meno ?? come è possibile farlo ??

grazie.

HW

[Mich_]

Si puo` fare anche quello (consigliabile se vuoi modificare molte caratteristiche con un solo evento), ma l'esempio che ti ho dato modifica solo una caratteristica del CSS tramite JS.

Ciao
Michele

[hw.master]

Scusa la mia igoranza ma percè devo usare la propietà backgroundColor se voglio cambiare il colore del testo del link ??

ma è giusto così
<div id="Layer1" style="position:absolute; left:74px; top:65px; width:145px; height:40px; z-index:1">
pippo
</div>

devo quindi utilizzare un <div id="layerN" ...
per ogni link ?
Non posso creare un layer contenitore di div identificati da un nome
tipo
<div id="Layer1" style="position:absolute; left:74px; top:65px; width:145px; height:40px; z-index:1">
<div id="Link1">
pippo
</div>
</div>

ma dove utilizzi la variabile liv , non centra niente con div ? l'associazione viene fatta tramite il nome del layer ?

Grazie.

HW

[Mich_]

Originariamente inviato da hw.master
Scusa la mia igoranza ma percè devo usare la propietà backgroundColor se voglio cambiare il colore del testo del link ??

Non avevo capito che volevi cambiare il colroe del testo: usa l'attributo che ti serve.

ma è giusto così
<div id="Layer1" style="position:absolute; left:74px; top:65px; width:145px; height:40px; z-index:1">
pippo
</div>

Si`, a parte che perche` funzioni bene, le funzioni devono ritornare false. Nota pero` che Layer e layer sono due nomi diversi: usa un criterio unico per le maiuscole.

devo quindi utilizzare un <div id="layerN" ...
per ogni link ?
Non posso creare un layer contenitore di div identificati da un nome
tipo
<div id="Layer1" style="position:absolute; left:74px; top:65px; width:145px; height:40px; z-index:1">
<div id="Link1">
pippo
</div>
</div>

Il doppio div non serve (ti crea qualche problema inpiu`). In teoria potresti colorare anche il tag <a>, tramite il getElementById, in pratica non tutti i browser lo capiscono.

ma dove utilizzi la variabile liv , non centra niente con div ? l'associazione viene fatta tramite il nome del layer ?

Il metodo (di document) getElementById() fa riferimento al nome del div (o altro oggetto). Nelle funzioni che ho fatto io le variabili idd, liv, i sono locali, quindi non importa che nome hanno; la variabil MAX, invece, deve essere una costante o una varibile globale (da definire quindi fuori dalla funzione).

Ciao
Michele

[hw.master]

Grazie Michele,

per la tua cortesia.

Provo tutto attentamente cercando di fare diverse prove sull'idea che mi hai dato per arrivare alla soluzione e faccio sapere.



HW

[hw.master]

Scusami Michele,

ma ho provato ad inserire il tuo codice nella pagina ma non funziona.
Ti posto il codice (ha proposito la propietà per cambiare il colore di testo è Color ?)

Grazie.
HW


<html>
<head>
<title>Prova Colora-Decolora</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function Colora(idd) {
document.getElementById(idd).style.backgroundColor = '000000';
}

function Decolora() {
var liv;
for (var i=0; i<MAX; i++) {
liv = 'layer'+i;
document.getElementById(liv).style.backgroundColor = 'ffffff';
}
}

//-->
</script>
</head>

<body>
<div id="layer1" style="position:absolute; left:10px; top:24px; width:114px; height:18px; z-index:1">PIPPO</div>
<div id="layer2" style="position:absolute; left:9px; top:60px; width:114px; height:18px; z-index:2">PIPPO2</div>
</body>
</html>

[Mich_]

Il parametro per il colore del testo credo sia color (minuscolo).

Come ti dicevo devi metterci un return false alla fine delle funzioni (soprattutto l'ultima chiamata), altrimenti hai effetti collaterali.

Il loop del decolra non e` corretto per il tuo codice HTML.

function Colora(idd) {
  document.getElementById(idd).style.color = '000000';
return false;
}

function Decolora() {
  var liv;
  for (var i=1; i<=2; i++) {
    liv = 'layer'+i;
  document.getElementById(liv).style.color = 'ffffff';
  }
}

Inoltre l'oggetto che vuoi colorare/decoloare non e` il div, ma il <a>, per cui prova a modificare anche l'HTML:

 <div id="llayer1" 
style="position:absolute; left:10px; top:24px; width:114px; height:18px; 
z-index:1">PIPPO</div>
<div id="llayer2" 
style="position:absolute; left:9px; top:60px; width:114px; height:18px; 
z-index:2">PIPPO2</div>

Ciao
Michele