Migliorare la gestione colori dei link

**Gas75** · 22-12-2011, 18:53

Salve,
ho un elenco di immagini con sotto una didascalia ciascuna, unite in un semplice link

codice:

<a href... target="opera"></a>

dove "opera" è un frame a parte.
A gestire l'aspetto di questo elenco provvede un foglio di stile dove ho dichiarato...

codice:

{ font-family: Arial,Verdana,Helvetica; color: #ffffff; font-size:10px } 
input     { font-family: Arial,Verdana,Helvetica; font-size:10pt } 
a:link    { color: #808080; text-decoration: none; font-weight: bold } 
a:visited { color: #808080; text-decoration: none; font-weight: bold } 
a:active  { color: #ffffff; text-decoration: none; font-weight: bold } 
a:hover   { color: #ffffff; text-decoration: none; font-weight: bold } 
a.cella   { display: block } 
a.cella:hover { display: block; background-color: #505050 } 
a:link img, a:visited img { border: 5px solid #808080; } 
a:hover img, a:active img { border: 5px solid #ffffff; } 
#contenitore { width:180px; margin: 0 auto; } 
.bordoimg:link, .bordoimg:visited { border: 5px solid #808080; } 
.bordoimg:hover, .bordoimg:active { border: 5px solid #ffffff; }
 hr {margin-top: 0px; border-top: 0px dotted #000;}

Ora, il codice sarà sicuramente migliorabile, ma intanto mi lavora discretamente su Explorer, mantenendo bordo e testo dell'elemento selezionato del colore che voglio, #ffffff, ma mi visualizza anche il solito contorno tratteggiato attorno al testo; su Firefox non ho il contorno tratteggiato, ma quando tolgo il mouse dal link cliccato, bordo e testo tornano al colore precedente, mentre a me serve tassativamente che resti un riferimento a quello che è stato cliccato.

Domanda: come posso intervenire sul foglio di stile affinché l'elemento cliccato resti del colore #ffffff finché non clicco qualcos'altro in quell'elenco (deve rimanerci anche se navigo nel frame accanto da lui caricato!), senza però che su Explorer appaia il contorno tratteggiato?

Grazie a chi avrà la pazienza di accontentarmi.

**ac_socmel** · 22-12-2011, 21:24

il bordo tratteggiato è dato dall'outline
devi mettere in link:active
outline: none;

per mantenere il click io ho studiato una soluzione in javascript, accozzando dei pezzi trovati in giro
quindi ipotizzando che il tuo menu abbia id="links"

Codice PHP:


onload=function(){

     if(!document.getElementById || !document.getElementsByTagName) return;

     ext=document.getElementById("links");

     l=ext.getElementsByTagName("a");

     for(i=0;i<l.length;i++)

         l[i].onclick=function(){

             document.getElementById('sel').setAttribute('id', '');

             this.setAttribute('id', 'sel');

             //return(false)

             };

         //onclick=function(){window.open(this.href);return(false)};

     }

puoi vedere il mio risultato
spero di averti aiutato
se riesci a migliorarlo (vorrei usarlo con le classi invece che gli id) fammi un fischio

**Gas75** · 23-12-2011, 10:27

Grazie dell'interessamento.

Prima di procedere ho bisogno di capire alcune cose...

1) il tuo codice integra il mio css o lo sostituisce?
2) il mio menù sta in un frame che ho chiamato "wbs", mentre le pagine che da esso devono aprirsi stanno in nel frame "opere". In altri termini questa è la struttura dove devo operare.

codice:

<frameset cols="200,*" framespacing="0" border="1" frameborder="0">
	<frame name="wbs" noresize="noresize" src="../menu/consolidamenti/elenco_progetti.htm" marginwidth="4" marginheight="0" scrolling="auto">
	<frame name="opere" noresize="noresize" src="elenco/tutti.htm" marginwidth="4" marginheight="0" scrolling="auto">
	<noframes>
	<body topmargin="10">
	<p align="center">La pagina corrente utilizza i frame.

	Questa caratteristica non è supportata dal browser in uso.</p>
	</body>
	</noframes>
</frameset>

Il file elenco_progetti.htm è quello che usa il css che ho copiato qui ieri, con tutti i link che puntano al target="opera". Avrei bisogno di sapere come far funzionare il tuo javascript nel mio codice.

Edit: ho aggiunto nel css

codice:

link:active { outline:none; }

ma evidentemente ho sbagliato perché su Explorer quel contorno resta.
Idem aggiungendo outline:none; nelle varie righe dove dichiaro lo stile dei collegamenti.

E quest'altra discussione non risolve un problema analogo.

**ac_socmel** · 23-12-2011, 16:59

il css che ci interessa andrebbe scritto così

codice:

a:link {
    color: #808080;
    text-decoration: none;
    font-weight: bold
} 
a:visited {
     color: #808080
} 
a:hover, a:active, a:focus, #sel {
     color: #ffffff;
     outline: none
} 
a:link img, a:visited img {
     border: 5px solid #808080
} 
a:hover img, a:active img, a:focus img, #sel img, #sel:hover img {
     border: 5px solid #ffffff;
     outline: none /*questa riga è ridondante nella speranza
 che vada a colpire dove desideriamo, si può comodamente cancellare*/
}

come vedi è il tuo codice, soltanto che ho ragruppato le situazioni che vogliamo gestire
se "outline none" non funziona su explorer prova a chiedere in javascript se sanno come fare

nell'html dovresti dare:
1) id="sel" al primo link o comunque a quello attivo
2) id="links" al contenitore(genitore) dei link
e usare il javascript che ti ho postato prima
se questo ha già un id devi cambiare nel javascript "links" con quello che ti serve

ti ho fatto un esempio con frameset

**Gas75** · 23-12-2011, 18:17

Su Firefox funziona perfettamente, su Explorer c'è ancora quel problema del contorno tratteggiato...

Grazie mille per prezioso aiuto e buon Natale.

Edit: ho notato che, se clicco un link nel frame di destra, perdo il bordo evidenziato nell'elenco dove agisce il css che mi hai scritto.

Mi serve invece che il bordo indichi sempre in che punto dell'elenco mi trovo.

**ac_socmel** · 23-12-2011, 20:41

a questo punto bisognerebbe guardare come lo stai facendo in una pagina online
ma fra qualche giorno
ora è tempo di festeggiare
buone feste anche a te

**Gas75** · 24-12-2011, 19:19

Ok, vedrò di mettere online qualche pagina "work in progress"...

**Gas75** · 02-01-2012, 12:25

Possiamo riprendere l'argomento, visto che il problema è stato risolto a metà?

**ac_socmel** · 03-01-2012, 15:51

ok posta un link così vediamo la situazione

**Gas75** · 05-01-2012, 18:33

Ecco qui una situazione tipica...
http://www.mediafire.com/file/8ffqbq...er_html.it.zip
Decomprimete il file zip e aprite index.htm .
Come vedrete se clicco su uno dei link del frame di sinistra, esso diventa bianco e resta tale anche spostando il mouse, ma se vado a cliccare su uno dei link del frame di destra, perdo questo effetto. Chiaramente i link della scheda di destra sono uguali a quelli di sinistra ma nella realtà non è così, l'ho fatto per fare un esempio veloce con le pagine che sto allestendo, giusto per fare vedere cosa succede ai bordi di sinistra cliccando su un link di destra...
Inoltre si può vedere che il bordo della Manifattura nell'elenco opere è grigio sebbene la scheda di destra carichi la pagina corrispondente... Mi servirebbe che fosse illuminato come succede, utilizzando il banale

codice:

<font color="#ffffff"></font>

nei link in maiuscolo sotto al titolo di ogni scheda di destra. Cosa che non mi conviene fare per l'elenco poiché dovrei creare tanti elenchi per quante sono le schede da aprire, uno per ogni bordo bianco da visualizzare, come fatto per le schede di destra. Su tre link si può anche fare, tanto più che aprono una nuova pagina con contenuti differenti, ma l'elenco di destra conta decine di link ad altrettante schede, ed è soggetto ad aggiornamenti, quindi mi occorre una soluzione che colori i bordi al clic del mouse mantenendo un unico elenco.

In pratica ogni scheda di destra dovrebbe essere un "minisito" indipendente dal resto e il bordo bianco del riquadro nell'elenco di sinistra dovrebbe indicare sempre in che "minisito" mi trovo...

Discussione: Migliorare la gestione colori dei link

Strumenti discussione

Ricerca discussione

Visualizza

Migliorare la gestione colori dei link

Re: Migliorare la gestione colori dei link

Permessi di invio