L’effetto che vogliamo ottenere è quello utilizzato in questo sito web: http://www.giorgiopirrotta.com/filatelico.php.

Appena passiamo su la miniatura appare un tooltip semitrasparente che ci mostra il titolo dell’opera, la cosa buona è che il titolo dell’opera mostrato viene preso direttamente dall’attributo alt dell’immagine.

Inoltre il box che appare è un div la cui visualizzazione è gestita mediante i css, quindi è ampiamente configurabile.

La versione di jQuery utilizzata in questo sito è la 1.4.2 caricata direttamente sul server, ma nulla ci vieta di usare le versioni in hosting su altri server (es. google).

Per prima cosa costruiamo il div a cui abbiamo assegnato id #box che avrà la funzione di tooltip, vediamo prima le regole css e poi l’HMTL:

#box{
	position:absolute;
	display:none;
	top:0;
	right:0;
	width:120px;
	height:auto;
	border:#633 1px solid;
	background-color:#966;
	font-family:Verdana, Geneva, sans-serif;
	font-size:15px;
}

Ci sono 2 cose che vanno notate, abbiamo assegnato la posizione absolute, e il display none, questi 2 valori sono fondamentali per il corretto funzionamento del nostro box.
Per inserire il div nella pagina abbiamo utilizzato il seguente codice:

Essendo tale box posizionato in maniera assoluta possiamo dire con una certa approssimazione che dove mettiamo tale codice è indifferente.
In realtà basta non inserirlo all’interno di un altro div con posizione relativa o assoluta.

Le immagini sono state posizionate dentro un div a cui è stata assegnata classe dpNone.
Adesso abbiamo tutte le informazioni per scrivere il codice jQuery:

$('div.dpNone img').mousemove(function(e){
	$('#box').fadeTo(25,0.85);
	$('#box').html($(this).attr('alt'))
	$('#box').css({
				 'top':e.pageY+5,
				 'left':e.pageX+5,
	 })
 });
$('div.dpNone img').mouseleave(function(){
	$('#box').hide()
})

Il codice sul mouseleave non necessita commenti, mentre possiamo dedicare un po’ di attenzione a queste due chiamate

$('#box').html($(this).attr('alt'))
$('#box').css({
	 'top':e.pageY+5,
	 'left':e.pageX+5,
 })

$(‘#box’).html($(this).attr(‘alt’)) prende il contenuto dell’attributo alt mediate il metodo attr(9 dell’attuale immagine e lo insericsce come HTML all’interno del nostro box (metodo html()), in pratica legge l’alt dell’attuale immagine e lo scirve nel box.

Poi mediante il metodo css() posizioniamo il box dove attualmente è posizionato il mouse, in realtà lo posizioniamo un po’ più a sinistra e un po’ più in basso, in quanto se lo posizionassimo esattamente dov’è il mouse non saremmo più sulla miniatura e verrebbe lanciato l’evento mouseleave() e quindi il box verrebbe chiuso.