Questo script permette di avere, un effetto fade (visibile però solo su NN 6 e su IE 4.x).
L'esempio si compone di 2 file:
- esempio.htm
- alttxt.js
Per una più semplice comprensione del presente script fai continuamente riferimento ai file sopracitati, verificando le procedure e i dati espressi. Solo in questo modo, con un continuo confronto, comprenderai le peculiarità di questo Javascript.
Iniziamo impostando i seguenti fogli di stile tra i tag <head> della pagina:Per prima cosa inseriamo i seguenti fogli di stile tra i tag <head> della pagina:
<style type="text/css">
.navtext {
text-align:left;
width:230px;
font:normal 7pt tahoma;
border-width:2px;
border-style:outset;
border-color:white;
background-color:#006699;
layer-background-color:red;
color:white; }
</style>
A questo punto è fondamentale richiamare il file esterno contenente il javascript che gestisce l'effetto. Inseriamo, sempre tra gli <head> questa stringa:
<script language="javascript" src="alttxt.js"></script>
Il file esterno .js non richiede nessuna modifica particolare.
La personalizzazione riguarda soprattutto l'aspetto grafico e quindi i CSS.
text-align:left;
indica l'allineamento del testo all'interno del layer di descrizione. i parametri accettati sono: left, right, center e justify. attenzione: il parametro "center" provoca un disallineamento del layer con Netscape 4.x
width:230px;
indica la lunghezza massima del layer
font:normal 7pt tahoma;
lo stile, la grandezza ed il tipo di font utilizzati
border-width:2px;
lo spessore del bordo del layer
border-style:outset;
lo stile applicato al bordo. può essere sostituito ad esempio con inset
border-color:white;
il colore del bordo del layer. sono accettati anche i valori esadecimali
background-color:#006699;
il colore di sfondo utilizzato
layer-background-color:red;
parametro che riguarda solo Netscape
color:white;
il colore del testo nel layer
Ad ogni link dovremo aggiungere un evento onMouseOver ed un evento onMouseOut per richiamare l'effetto. in questa maniera:
<a href="http://www.html.it" onMouseOver="writetxt('Visita Html.it. Scripts, Tutorials, Guide.')" onMouseOut="writetxt(0)">Html.it</a>
onMouseOver="writetxt('Visita Html.it. Scripts, Tutorials, Guide.')"
onMouseOut="writetxt(0)"
Il testo da visualizzare va scritto all'interno delle parentesi tra due singoli apici. nel caso volessimo utilizzare un apostrofo basterà anteporre al carattere " ' " un back slash "".
Infine, cosa molto importante, dobbiamo inserire in un punto qualsiasi del body questo <div>:
<div id="navtxt" class="navtext" style="position:absolute; top:-100px; left:0px; visibility:hidden"></div>
Altre modifiche allo script non sono richieste.
