Fare internet

E' come il lego, più pezzi ho più sono allegro
Seguci su Facebook Seguici su Twitter Iscrivita ai nostri Feed      Mandaci una mail

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:

<div id="box"></div>

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.

Twitter