A SBAFO! Manuali o tutorials gratis

Copyright© Seatiger Team 2002
Sono vietate la riproduzione, la pubblicazione e la distribuzione anche parziale del presente manuale
senza il consenso scritto degli autori.

5.5 Trasformazione del testo

La trasformazione del testo (text-transform) consente di modificare da minuscole in maiuscole o viceversa le lettere che formano il link testuale all'attivarsi di un particolare evento. E' un elemento anche questo interessante se si vogliono creare dei menù testuali.

I valori ammessi sono:

capitalize
uppercase
lowercase

Il valore capitalize trasforma la prima lettera di ogni parola che forma il link testuale in maiuscola, il valore uppercase trasforma tutte le lettere in maiuscole, il valore lowercase tutte in minuscole.

Utilizzando la stessa stringa di base abbiamo associato all'evento del contatto del mouse la trasformazione di tutte le lettere del link testuale da minuscole in maiuscole.

Ecco l'esempio:

<html>
     <head>
     <title>Titolo del documento</title>
     <style type="text/css">
BODY { background:#FFFFD1; color:#000000 }
A:link { color: Green;background:#FFFFD1;text-decoration : none}
A:visited {color: Green;background:#FFFFD1;text-decoration :none}
A:hover {color: Red;background:#FFFFD1;text-decoration : none;
text-transform : uppercase}
A:active {color: lime;background:#FFFFD1;text-decoration : none}
</style>
     </head>
     <body>
     <p>Questo è un<a href="http://www.asbafo.net" target="_blank"> link in minuscolo</a> che si trasforma, </p>
<p>al contatto del mouse in maiuscolo.</p>
     </body>
</html>

anteprima

5.6 Evidenziazione del link

L'evidenziazione del link (background-color) consente, come appare chiaro anche dal nome, di evidenziare il link, all'attivarsi di un particolare evento, con un colore, come di pennarello. Il colore va espresso in formato esadecimale preceduto dal simbolo della celletta # oppure nel suo nome in inglese.

Utilizzando la stessa stringa di base abbiamo associato all'evento del contatto del mouse l'evidenziazione in celeste del link testuale.

Ecco l'esempio:

<html>
     <head>
     <title>Titolo del documento</title>
     <style type="text/css">
BODY { background:#FFFFD1; color:#000000 }
A:link { color: Green;background:#FFFFD1;text-decoration : none}
A:visited {color: Green;background:#FFFFD1;text-decoration :none}
A:hover {color: Red;background:#FFFFD1;text-decoration : none;
background-color : Aqua}
A:active {color: lime;background:#FFFFD1;text-decoration : none}
</style>
     </head>
     <body>
     <p>Qui sotto c'è un link che, se viene a contatto con il mouse,</p>
     <p>si evidenzia con un colore:</p>
     <p><a href="http://www.asbafo.net" target="_blank">QUESTO E' IL LINK</a></p>
     </body>
</html>

anteprima

5.7 Cambio del tipo di font

Si può associare ad un evento anche il cambio del font da usare.

Utilizzando la stessa stringa di base abbiamo associato all'evento del contatto del mouse il cambio del font in "Courier New". Valori ammessi interpretabili da ogni browser:

"Courier New", Courier, monospace;
"MS Serif", "New York", serif;
"Times New Roman", Times, serif;
"MS Sans Serif", Geneva, sans-serif;
Verdana, Geneva, Arial, Helvetica, sans-serif;
Arial, Helvetica, sans-serif

Ecco l'esempio:

<html>
     <head>
     <title>Titolo del documento</title>
     <style type="text/css">
BODY { background:#FFFFD1; color:#000000 }
A:link { color: Green;background:#FFFFD1;text-decoration : none}
A:visited {color: Green;background:#FFFFD1;text-decoration :none}
A:hover {color: Red;background:#FFFFD1;text-decoration : none;
font-family : "Courier New", Courier, monospace}
A:active {color: lime;background:#FFFFD1;text-decoration : none}
</style>
     </head>
     <body>
     <p>Qui sotto c'è un link che, se viene a contatto con il mouse,</p>
     <p>cambia il tipo di font usato:</p>
     <p><a href="http://www.asbafo.net" target="_blank">QUESTO E' IL LINK</a></p>
     </body>
</html>

anteprima

5.8 Cambio delle dimensioni del font

Analogamente si può associare ad un evento anche l'aumento o la diminuzione delle dimensioni del font.

Utilizzando la stessa stringa di base abbiamo associato all'evento del contatto del mouse il cambio delle dimensioni del font sino a 20 pixels. Il valore può essere espresso in pixels oppure in percentuale.

Se espresso in pixels la sintassi sarà:

font-size : 20px;

Se espresso in percentuale la sintassi sarà:

font-size : 20%;

Nota: Non sono accettati valori negativi.

Ecco l'esempio:

<html>
     <head>
     <title>Titolo del documento</title>
     <style type="text/css">
BODY { background:#FFFFD1; color:#000000 }
A:link { color: Green;background:#FFFFD1;text-decoration : none}
A:visited {color: Green;background:#FFFFD1;text-decoration :none}
A:hover {color: Red;background:#FFFFD1;text-decoration : none;
font-size : 20px}
A:active {color: lime;background:#FFFFD1;text-decoration : none}
</style>
     </head>
     <body>
     <p>Qui sotto c'è un link che, se viene a contatto con il mouse,</p>
     <p>si ingrandisce sino a 20 pixels:</p>
     <p><a href="http://www.asbafo.net" target="_blank">QUESTO E' IL LINK</a></p>
     </body>
</html>

anteprima