Il costruttore Tips permette inoltre di specificare due eventi personalizzati:
- onShow, che scatta quando appare il tooltip;
- onHide, che scatta quando scompare il tooltip.
Vengono utilizzati solitamente per creare effetti al momento della comparsa/scomparsa del tooltip.
In questo secondo esempio vedremo come creare un tooltip su di un'immagine con effetto fade.
Per creare questo tipo di effetto bisogna impostare nelle opzioni gli eventi onShow e onHide; ad entrambe queste funzioni viene passato come argomento un oggetto che rappresenta il tooltip: noi lo useremo per creare un Fx.Style che cambia il valore di opacità del tooltip da 1 a 0 quando viene mostrato, e da 0 a 1 quando viene rimosso. Vediamo il codice:
window.addEvent('load', function() {
var tip2 = new Tips($$('.tooltip2'), {
initialize: function() {
this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 500, wait: false}).set(0);
},
className: 'tool2',
onShow: function(tip) {
this.fx.start(1);
},
onHide: function(tip) {
this.fx.start(0);
}
});
});
Il metodo start dell'oggetto Fx.Style cambia il valore della proprietà 'opacity' sia alla comparsa sia alla scomparsa del tooltip (sull'immagine con class 'tooltip2'): si ottiene cosi l'effetto fade desiderato.
Questa è la parte HTML che rappresenta l'immagine (abbiamo dato uno stile alle sezioni del tooltip come in precedenza impostando delle regole CSS apposite):
<img class="tooltip2" src="2.jpg" alt="" title="La Terra :: La formazione della Terra è datata circa 4.57 miliardi di anni fa. La Terra possiede un solo satellite naturale, la Luna, che ha iniziato ad orbitare intorno ad essa circa 4.53 miliardi di anni fa..." />
Terzo esempio: fixed tooltip
L'ultimo esempio sull'uso dei tooltips mostra come realizzare un tooltip fisso su di un'immagine.
Anche se l'utente trascina il mouse all'interno di questa immagine il tooltip rimarrà ancorato alla sua posizione iniziale.
Per creare un effetto di questo genere è necessario impostare a true il valore dell'opzione fixed nel secondo argomento del costruttore Tips:
var tip2 = new Tips($$('.tooltip2'), {
className: 'tool2',
fixed:true
});
La parte HTML è esattamente la stessa dell'esempio precedente, poiché l'unica differenza è la posizione fissa del tooltip.
Conclusione
In questo articolo abbiamo visto come funziona il costruttore Tips e tre esempi pratici che mostrano il risultato che si può ottenere sfruttando le opzioni di personalizzazione. Tutti gli esempi sono disponibii per il download.
Ultimi articoli JavaScript
Guide JavaScript
Guida Node.jsIl framework che permette di per usare V8, l'interprete JavaScript... |
Canvas, guida ai frameworkCanvas, tra gli elementi di HTML5 è forse quello di maggior impatto.... |
Guida jQuery UICreare siti ricchi e dinamici con jQuery UI, il progetto ufficiale... |
Newsletter @JavaScript
Ogni martedì, direttamente nella tua e-mail: guide, articoli, script, novità e approfondimenti tecnici su JavaScript.
Iscriviti alla newsletter
Corsi in aula
|
|
Corso Webmaster base18 Giugno 2012 a Milano |
|
|
Corso Google AdWords Base25 Giugno 2012 a Milano |
|
|
Corso JQuery e Ajax per Webmaster03 Luglio 2012 a Milano |
|
|
Corso Google AdWords Base05 Giugno 2012 a Roma |
|
|
Corso Webmaster base11 Giugno 2012 a Roma |