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

Tooltip con stile

Link copiato negli appunti

I tooltip sono i piccoli box gialli con testo nero che compaiono, navigando sul web, quando si passa con il mouse, in genere, su un link o su un'immagine.
Se utilizzati con criterio sono un ottimo ausilio alla navigazione: consentono, ad esempio, di comunicare informazioni aggiuntive sulla destinazione di un link o su un elemento grafico. Perchè l'utente possa fruirne, c'è però bisogno di rispettare alcuni prerequisiti. Quello fondamentale consiste nell'utilizzo dell'attributo title. Se per esempio costruisco un link di questo tipo

<a href="http://www.html.it" title="Il portale italiano del web publishing">HTML.it</a>

quando l'utente passa con il mouse sopra di esso, visualizzerà il testo 'Il portale italiano del web publishing' in forma di tooltip. In genere, è buona norma aggiungere altri dettagli, informando l'utente sulla destinazione del link (nuova finestra o stessa finestra) o sulla lingua del sito collegato.

Lo script che presentiamo sfrutta la potenza dei CSS e di Javascript, combinati, per dare un tocco di stile ai tooltip, dicendo addio alla classica combinazione sfondo giallo con testo nero che è quella di default.

  • esempio.htm
  • tooltip.css
  • tooltip.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.

## 1: LA SEZIONE head
All'interno della sezione head, devi prendere in considerazione due semplici istruzioni.

La prima è quella con cui importiamo nella pagina il foglio di stile che gestisce l'aspetto del tooltip:

<style type="text/css">
@import "tooltip.css";
</style>

Attenzione! Affinchè lo script funzioni è necessario importare il CSS con il metodo visto qui sopra (regola @import).

La seconda istruzione fondamentale è quella con cui importiamo lo script esterno tooltip.js:

<script src="tooltip.js" type="text/javascript" language="javascript"></script>


Ti consigliamo anche