Problemi con i lnk

[Lincoln Six Ech]

Salve, una domanda da un neofita.

Sto creando una pagina (con CSS esterno) in cui ci sono sia parole sia immagini linkate.

Il seguente codice nel CSS mi "comanda" solo le parole linkate, ma non le immagini (per intenderci, i bordi non sono della totalità di blu richiesta né diventano bianchi al passaggio del mouse)

a:link
{
font-size: 20px;
font-family: book antiqua;
color: #00698c;
text-decoration: none;
}
a:visited
{
font-size: 20px;
font-family: book antiqua;
color: #09afff;
text-decoration: none;
}
a:hover
{
font-size: 20px;
font-family: book antiqua;
color: #ffffff;
text-decoration: none;
}
a:active
{
font-size: 20px;
font-family: book antiqua;
color: #ffffff;
text-decoration: none;
}


Ho risolto parzialmente il problema mettendo questo codice nella pagina HTML:

<link="#00698c" alink="#aaaa00" vlink="#09afff">

però non so quale è il comando "hover" per l'HTML semplice, quindi, anche se ora i bordi delle immagini linkate sono del colore desiderato, non cambiano colore al passaggio del mouse.

Potete aiutarmi? dirmi dove sto sbagliando?

Grazie in anticipo.

[pierofix]

Se mi permetti vorrei farti notare innanzitutto che il codice che hai scritto si può ottimizzare di molto. Di seguito la correzione, al termine della quale ci saranno le spiegazioni:

a {
   font:1em "Book Antiqua",serif;
   text-decoration:none;
}
a:link { color:#00698c }
a:visited { color:#09afff }
a:hover, a:active { color:#fff }

1. Sfruttando il concetto di ereditarietà ho condensato in un unico elemento (tramite il selettore a) le caratteristiche ripetitive, ovvero la dimensione del testo, il font e la non-sottolineatura.
   
2. Ho unito le proprietà 'font-size' e 'font-family' nell'abbreviazione 'font' (qui i dettagli: www.w3.org/TR/CSS21/fonts.html#font-shorthand ).
   
   Ho modificato l'unità di misura px (che è fissa) in em (che è proporzionale): il vantaggio è che persone con problemi alla vista non avranno difficoltà ad aumentare la dimensione nel testo nel loro browser. Approfondimento: http://24ways.org/advent/an-explanation-of-ems .
   
   Ho incluso il nome del font Book Antiqua nei doppi apici (le virgolette) perchè la sintassi CSS prevede così per i nomi di font composti da più di una parola. Ho inoltre creato una "coda" di font, concludendola con "serif", un carattere installato su TUTTI i computer: nel caso una persona non avesse installato il "Book Antiqua" visualizzerà il carattere successivo della coda e così via.
   
3. Nei selettori sucessivi è bastato specificare il colore (l'unica informazione che cambia di volta in volta).
   
4. Visto che a:hover e a:active hanno lo stesso colore, è bastato specificare un'unica istruzione, separando i selettori con una virgola.

Un bel risparmio, no?

[Lincoln Six Ech]

Grazie per la correzione...però il mio problema di fondo rimane anche con il tuo codice, che funziona solo sulle parole linkate ma non sulle immagini.

[Sickbrain]

Se ho capito bene tu vuoi che le tue immagini corrispondenti ad un link presentano le caratteristiche di bordo colorato, che cambia colore al passaggio del mouse.

Per controllare queste caratteristiche devi specificarle; per tanto se le tue immagini sono contenute all'interno di un div#text devi "dire" che tutte le immagini contenute all'interno di quel specifico div siano col colore che tu vuoi

div#text img a {
  border:1px solid red;
}
div#text img a:hover {
  border:1px solid black;
}

Con questo codice tutte le immagini contenuto nel div text e che hanno un link sotto avranno un bordo di 1px rosso, e al passaggio del mouse ci sarà un bordo di 1px nero.

Considerando il concetto di ereditarietà dei CSS io ti consiglio di creare una classe particolare per le tipologie di immagini, così che le potrai controllare meglio.

Spero di esserti stato d'aiuto.

[Lincoln Six Ech]

In questo modo?

.cornice_blocco_media img a
{
border: 1px solid;
color: #00698c;
}
.cornice_blocco_media img a:visited
{
border: 1px solid;
color: #09afff;
}
.cornice_blocco_media img a:hover
{
border: 1px solid;
color:#ffffff;
}

Questo è l'HTML

<div class="cornice_blocco_media">
[img]furetto1small.jpg[/img]
</div>

Scusa la tanardaggine, ma proprio non riesco a farli funzionare...

[Sickbrain]

No. La classe la devi abbinare all'immagine:

<a href="link.html">
[img]furetto.jpg[/img]
</a>

Se tutto è fatto bene dovrebbe funzionare:-)