Avevamo già vistoin precedenza, la possibilità di visualizzare un testo di descrizione dei link diverso da quello classico che compare dentro una finestra con sfondo giallo.
Lo script che presentiamo è estremamente versatile ed offre moltissimi parametri di configurazione ed effetti grafici. È una variante del codice creato da Essam Gamal.
Lo script è perfettamente compatibile con tutti i principali browser.
- esempio.htm
- main.js
- style.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.
Inseriamo il seguente codice tra i tag <head> della pagina:
<script language="javascript1.2" src="main.js" type="text/javascript"></script>
Sotto il tag <body> inseriamo questo codice (il tag <div> deve precedere il tag <script>):
<div id="tiplayer" style="visibility:hidden;position:absolute;z-index:1000;top:-100;"></div>
<script language="javascript1.2" src="style.js" type="text/javascript"></script>
Bisogna fare attenzione che i percorsi dei file JavaScript richiamati siano esatti.
A questo punto occorre impostare stile e testi dei messaggi tip. Per far questo apriamo il file style.js con un editor di testo.
Un prima riga da personalizzare nel file è la seguente:
var FiltersEnabled = 1;
Se la variabile FiltersEnabled è impostata su 1 alcuni effetti visivi, funzionanti solo su Microsoft Internet Explorer 5.5 o superiore, saranno abilitati. Se vogliamo disabilitare questi effetti basta impostare la variabile sul valore 0.
Andiamo ora a personalizzare gli array Text[] e Style[].
L'array Text[] ha due opzioni da impostare:
Text[&46;&46;&46;] = [titolo,testo]
titolo
Imposta il titolo del messaggio tip. Se vogliamo che il tip non abbia un titolo dobbiamo lasciare vuota questa opzione (le virgolette sono necessarie).
testo
Imposta il testo del tip (le virgolette sono necessarie).
Nell'array Style[] ci sono 25 opzioni, in quest'ordine:
Style[&46;&46;&46;] = [TitleColor,TextColor,TitleBgColor,TextBgColor,TitleBgImag,TextBgImag,TitleTextAlign,TextTextAlign, TitleFontface, TextFontface, TipPosition, StickyStyle, TitleFontsize, TextFontsize, width, height, bordersize, PadTextArea, CoordinateX , CoordinateY, TransitionNumber, TransitionDuration, TransparencyLevel ,ShadowType, ShadowColor]
TitleColor, TextColor
Rappresentano il colore del testo, rispettivamente del titolo e del corpo del messaggio. Si possono utilizzare dei valori esadecimali, come #FFFFFF, o i nomi dei colori, come white. (Le virgolette sono necessarie).
TitleBgColor, TextBgColor
Sono i colori di sfondo del titolo e del testo del messaggio. Per avere uno sfondo trasparente occorre lasciare questi campi vuoti. (Le virgolette sono necessarie).
TitleBgImag, TextBgImg
Permettono di inserire un'immagine di sfondo, rispettivamente per il titolo e per il corpo del messaggio. Se l'immagine non è nella stessa directory del file html occorre indicare il percorso completo. (Le virgolette sono necessarie).
TitleTextAlign, TextTextAlign
Impostano l'allineamento del titolo e del testo. Si può scegliere tra "left" (sinistra), che è l'opzione di default, "center" (centro) e "right" (destra). (Le virgolette sono necessarie).
TitleFontface, TextFontface
Impostano il font del titolo e del testo del messaggio. Se i campi vengono lasciati vuoti verrà utilizzata l'impostazione di default: Verdana,Arial,Helvetica. (Le virgolette sono necessarie).
TipPosition
Imposta la posizione del messaggio tip. Ci sono 5 opzioni disponibili:
- left: fa apparire il tip alla sinistra del mouse;
- center: mostra il tip al centro;
- right: il tip appare ala destra del mouse (è la posizione di default);
- float: il tip appare alle coordinate specificate e non si muove da quella posizione. Se la pagina viene scrollata i valori dello scroll vengono sommati a quelli delle coordinate del tip, perciò il messaggio rimarrà sempre lì. In poche parole con questa opzione il tip avrà una "posizione statica".
- fixed: il tip appare alle coordinate specificate. Quando la pagina viene scrollata il messaggio si muove con essa.
(Le virgolette sono necessarie).
StickyStyle
Imposta l'"incollamento" del messaggio. Ci sono 2 opzioni disponibili:
- sticky: il tip non scompare quando il mouse abbandona il link. Viene automaticamente generato un link "Close", che appare in alto a destra, in modo che cliccandoci sopra si può chiudere il messaggio. Lo stile del link di chiusura sarà lo stesso del titolo del tip. Questa proprietà è stata creata per permettere di inserire link all'interno dei messaggi tip.
- keep: il tip non scompare quando il mouse lascia il link e segue il mouse nei suoi spostamenti.
Se l'opzione StickyStile viene lasciata vuota, non verrà eseguito nessuno dei due effetti. (Le virgolette sono necessarie).
TitleFontsize, TextFontsize
Impostano le dimensioni del testo, rispettivamente per il titolo e per il corpo del messaggio. Accettano soltanto valori numerici. Questi possono essere negativi o positivi (come -1 e +1) oppure assoluti (come 1, 2, 3). La dimensione di default è 1. (Non vuole virgolette).
width, height
Indicano la larghezza e l'altezza del messaggio. Accettano solo valori numerici. La larghezza di default è 200. L'altezza di default viene adattata al messaggio. (Non vuole virgolette).
bordersize
Imposta la dimensione del bordo. Il colore del bordo è lo stesso del colore di sfondo del titolo. Anche questa opzione vuole solo valori numerici. Per non avere bordi occorre impostare bordersize a 0 o lasciare vuoto il campo. (Non vuole virgolette).
PadTextArea
Aggiunge uno spazio aggiuntivo all'area del testo, intorno al testo del messaggio. (Non vuole virgolette).
CoordinateX, CoordinateY
Se la posizione del tip è impostata su left o right impostano le coordinate X e Y in base alla posizione del mouse. Se, invece, la posizione del tip è impostata su float o fixed impostano le coordinate X e Y in base alla finestra. Si possono immettere numeri positivi o negativi. Il valore di default è 10. (Non vuole virgolette).
Transition
Imposta le transizioni, cioè gli effetti visivi all'apertura del tip. Si può specificare un numero da 0 a 51 per ottenere diversi effetti visivi. Con il numero 23 si ha un effetto random sui primi 23, con 51 si ha un effetto random tra tutti quanti. Per disabilitare le transizioni occorre impostare il campo su -1. Bisogna essere sicuri che la variabile FiltersEnabled sia settata su 1, altrimenti le transizioni non funzioneranno. Questi effetti visivi appariranno solo su Internet Explorer 5.5 o superiore. (Non vuole virgolette).
TransitionDuration
Imposta la durata delle transizioni in secondi. Si possono utilizzare numeri decimali o interi. Impostando il campo sul valore 1 le transizioni verranno disabilitate. Richiede Microsoft Internet Explorer 5.5 o superiore. (Non vuole virgolette).
TransparencyLevel
Aggiunge un livello di trasparenza da 1 a 99. I valori decrescenti aumentano la trasparenza, perciò impostando il campo sul valore 99 il tip sarà trasparente in maniera inpercettibile, mentre impostandolo su 1 il messaggio scomparirà completamente. Il valore 0 (default) elimina la trasparenza. Questo effetto funziona solo su Microsoft Internet Explorer 5.5 o superiore. (Non vuole virgolette).
ShadowType :
Si possono impostare due stili di ombreggiatura: "simplex" o "complex". Lasciando vuoto il campo non si avrà questo effetto. Richiede Microsoft Internet Explorer 5.5 o superiore. (Le virgolette sono necessarie).
ShadowColor
Imposta il colore dell'ombreggiatura. Lasciando il campo vuoto la si disattiverà. L'effetto richiede Microsoft Internet Explorer 5.5 o superiore. (Le virgolette sono necessarie).
Vediamo ora come implementare i messagi tip all'interno della pagina html.
Occorre utilizzare un link con due funzioni assegnate: stm(), che mostra il tip, e htm(), che lo nasconde. Vediamo un esempio:
<a href="http://www.html.it" onMouseOver="stm(Text[1],Style[0])" onMouseOut="htm()">Visita HTML.it</a>
Il messaggio allegato a questo link prenderà il testo dall'array Text[1] e lo stile dall'array Style[0]. Occorre assicurarsi che entrambi gli array inizino con la lettera maiuscola.
Text[1]=["Home Page","Clicca qui per visitare il sito di HTML.it."];
Style[0]=["white","black","#000099","#E8E8FF","","","","","","","","","","",200,"",2,2,10,10,51,1,0,"",""];
Da notare che nell'array Style[] ho lasciato vuoti molti campi. Quando si lascia vuoto un campo viene implementato il suo valore di default, perciò si possono lasciare vuoti tutti i campi per avere uno stile completamente di default. Bisogna anche fare attenzione a quando usare le virgolette e quando no: vanno utilizzate nelle stringhe e non nei valori numerici.
Per ogni nuovo stile o testo che si vuole creare occorre incrementare il valore dell'indice degli array Style[] e Text[] (fate attenzione a non usare due array con lo stesso indice).
Si può richiamare lo stesso stile (o lo stesso testo) più volte in diversi link, perciò se si vuole che tutti i tip abbiano lo stesso stile basta richiamare in tutti i link lo stesso elemento dell'array Style[] e diversi elementi dell'array Text[].
Altre modifiche non sono necessarie.
