Pubblicato da: fedeweb | luglio 3, 2008

Creare un tooltip gradevole con javascript

Molte volte mi è capitato di andare in siti web dove, passando sopra  alcune parole, compariva un riquadro elegante con una descrizione, e non il solito tooltip ottenibile con l’attributo title.

fade_tooltip

Sto parlando di uno script, molto leggero (solo 2 KB), che vi rivoluzionerà il modo di visualizzazione appunto dei tooltip, non solo per quanto riguarda i link, ma anche per delle parole all’interno del testo a cui volete associare un’ulteriore spiegazione.

Guardando questo esempio, capirete subito dove voglio arrivare.

Questo effetto è semplicissimo da ottenere:una volta scaricato lo script, messo in fondo all’articolo, dovrete installarlo nella vostra pagina web, in questo modo:

tra i tag head dovrete mettere:

<link rel=”stylesheet” type=”text/css” href=”style.css” />
<script type=”text/javascript” language=”javascript” src=”script.js”></script>

Poi per associare il tooltip al link, o alla parola/e  che volete dovrete aggiungere il codice seguente:

onmouseover=”tooltip.show(‘Testo che voglio’);” onmouseout=”tooltip.hide();”

Quindi, ad esempio, per un link si farà così:

<a href=”miosito.html” onmouseover=”tooltip.show(‘Mio sito <strong>Fedeweb</strong>’);” onmouseout=”tooltip.hide();”>Fedeweb</a>

Spero di essere stato chiaro. La fonte da cui ho preso queste informazioni spiega in modo dettagliato il funzionamento dello script.

Scarica il sorgente

Guarda l’esempio

Advertisements

Responses

  1. […] delle immagini in un tooltip Tempo fa avevo scritto un articolo su come creare dei tooltip gradevoli, grazie a […]

  2. Grande script, sono riuscito a farlo funzionare in Joomla!… grazie !


Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

Categorie

%d blogger hanno fatto clic su Mi Piace per questo: