Il sito per imparare gratuitamente a fare pagine Web

JavaScript K1
















K1 - Testo alternativo su links, conosciuto anche come ToolTip.


Funziona con il Browser:  Firefox firefox   Safari Safari   Opera opera   IE internet explorer   Chr Chrome

Crediti:
Nome: Brian Gosselin
Website: http://scriptasylum.com


Descrizione: Una finestra descrittiva simile agli attributi title ed alt di HTML che appare passando il cursore del mouse sopra ad un link, è possibile ottenere lo stesso effetto anche sui tags: IMG, SPAN, DIV, ecc. ecc ma non tutti i browser riconoscono tags diversi da href usato per i links, in quel caso però non ci sarebbe effetto ma neppure segnalazione di errore.

Questi alcuni esempi grazie ai quali è possibile rendersi conto di come lavora questo script:


Descrizione
Caratteristiche In quali browser
il tooltip funziona?
Altro Effetto...


Un click qui per abilitare/disabilitare il modo "mousefollow". Usando la toggle_mousefollow() function.

Un click qui per abilitare/disabilitare il modo "dofade". Usando la toggle_dofade() function.

Un click qui per abilitare/disabilitare il modo "centertext". Usando la toggle_centertext() function.




Passo 1 :

Selezionare tutto il codice cliccando sulla forbice, quindi posizionatevi sul testo evidenziato, adoperate il tasto destro del mouse per l'operazione di copia ed incolla, posizionatelo nella vostra pagina fra i tags: <head> e </head>.

seleziona tutto



Passo 2 :

Scaricate il file .js preleva il file e salvatelo nella stessa cartella dove avete la pagina html che lo richiama.

Note : Se dovete fare modifiche alla posizione del box o al ritardo nella su apparizione, aprite il file appena scaricato con un normale editor HTML (o ASCII puro), il word pad o note pad a corredo di windows andranno benissimo, niente editor visuali!!!




Passo 3 :

Selezionare tutto il codice cliccando sulla forbice, quindi posizionatevi sul testo evidenziato, adoperate il tasto destro del mouse per l'operazione di copia ed incolla, posizionatelo alla fine della vostra pagina web, prima della chiusura del tag: </body>.

seleziona tutto



Note : Non adatto ad un principiante. Questa la sintassi per richiamare l'effetto sul link:

<a href="http://www.url da linkare.it" onmouseover="writetxt('Descrizione')" onmouseout="writetxt(0)">Testo del link</a>

Gli eventi onmouseover ed onmouseout attivano e disattivano rispettivamente il box del ToolTip, per cui omettendo onmouseout questo resterà attivo fino a quando non si passerà su un altro link che incorpora onmouseover.

Al posto di (Descrizione), lasciando la parentesi (' e fino alla chiusura ')" è possibile introdurre il testo formattandolo con i normali tags di html quali: font, div, bold ecc. compresi eventuali links; in questo caso però si dovrà prestare particolare attenzione alla sintassi facendo in modo di usare al posto delle doppie virgolette che servono ad un link " l'equivalente codice html &quot;



Codice per ottenere questo link: Forum di Web-Link

<a href="http://www.ilmioforum.com" onmouseover="writetxt('Testo Testo Testo Testo Testo Testo Testo Testo <a href=&quot;http://www.ilmioforum.com/admin.html&quot;>Frase Linkabile all'interno del tooltip</a> Testo Testo Testo Testo Testo Testo ')" onmouseout="writetxt(0)"> Testo del link esterno... </a>



All'interno del file .js ci sono dei parametri configurabili e sono:

dofade - Impostato su true abilita l'effetto scomparsa (fade), impostato su false lo disabilita. Questa caratteristica è presente sui browser IE4+ ns6+ FF1+.

centertext - Impostato su true abilita la centratura di tutto il testo nel box, impostato su false giustifica il testo a sinistra.

xoffset - Imposta la distanza orizzontale in pixel dell'offset rispetto al puntatore del mouse.

yoffset - Come sopra, ma per quanto riguarda la distanza verticale.

mousefollow - Abilita il box a seguire lo spostamento del mouse. Impostata su false il box resta fisso dove appare.

hideDelay - Funziona solo quando mousefollow è impostato su false, permette di avere un ritardo (in millisecondi) tempo di scomparsa del box da quando il mouse lascia il link, è utile nel caso in cui al suo interno (del box) vi siano testi cliccabili.



Valutazione

Valutazione: 1.83 stelle su 5
N. Voti: (59)



  Elenco completo degli script.



Se avete domande da fare potete scrivere sul forum di supporto , gratuito e aperto a tutti.