Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Testo alternativo con effetto fade

Link copiato negli appunti

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;
;
font:normal 7pt tahoma;
border-;
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

;

indica la lunghezza massima del layer

font:normal 7pt tahoma;

lo stile, la grandezza ed il tipo di font utilizzati

border-;

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.


Ti consigliamo anche