Piccola pop-up che si apre al passaggio del mouse.

[goat]

Carissimi.
Se fate una visitina QUI! noterete questa gallery di avatar.
Se provate a posizionarvi sopra uno a caso, si aprirà all'improvviso una sorta di piccola pop-up con un ingrandimento dell'avatar e un pacchettino di testo. Ho dato un'occhiata al codice HTML ma non ciò capito poi molto.
Come faccio ad ottenere lo stesso effetto?
E' molto complesso da realizzare?
Non è carino?
ciao e grazie
goat

[var]

chiedi a Nosferatu, l'autore dello script.

[goat]

Originariamente inviato da var
chiedi a Nosferatu, l'autore dello script.

Si gli ho mandato un messaggino, però se c'è chi sa farlo e può partecipare a questa discussione magari fa comodo anche agli altri utenti. Comunque se Nosferatu me lo spiega posto tutto quello che mi dice qui.
Resto lo stesso in attesa.

[Popper]

non è un popup, bensi un <div> che appare e che segue il mouse. in pratica sono stati dichiarati N div con all'interno delle tabelle che visualizzano le immagini, poi attraverso la gestione eventi dei thumbs (onmouseover/out), vengono impostate le proprietà visible, top e left per far apparire e muovere il div.
Dovrei aprire il sorgente e guardare gli script per i dettagli meglio, ma sono già abb. infognato col mio lavoro

Spero di esserti stato cmq d'aiuto!

[goat]

Originariamente inviato da Popper
non è un popup, bensi un <div> che appare e che segue il mouse. in pratica sono stati dichiarati N div con all'interno delle tabelle che visualizzano le immagini, poi attraverso la gestione eventi dei thumbs (onmouseover/out), vengono impostate le proprietà visible, top e left per far apparire e muovere il div.
Dovrei aprire il sorgente e guardare gli script per i dettagli meglio, ma sono già abb. infognato col mio lavoro

Spero di esserti stato cmq d'aiuto!

Mi sei stato utile si. Unirò le tue informazioni a quelle che spero mi passerà l'autore del sito. Grazie.

[Nosferatu]

Buuuu!
Chi non muore si rivede! Non so se qualcuno tra voi è così dinosauro da ricordare quando postavo su Scripting...

Lo script che ho utilizzato è una versione leggermente modificata del famoso OverLIB, geniale e utilissima libreria di Erik Bosrup con l'unica pecca di essere pesantissima.

Ecco l'homepage del progetto OverLIB:
www.bosrup.com/web/overlib
Vi rimando lì per i dettagli tecnici specifici, che comunque necessitano di qualche settimana di studio... Bosrup non è il figlio del verduraio, in fatto di JavaScript.

In estrema sintesi, la libreria si occupa di modificare al volo il contenuto di una <div> nascosta e renderla visibile/invisibile al mouseover/out del mouse.
La <div> è una sola, e non N come diceva qualcuno. Il risultato comunque non cambia, perché il bello di quella libreria è la semplicità estrema delle chiamate JavaScript per ottenere il risultato.

L'apparente incasinamento deriva dal fatto che la pagina che hai guardato tu, Goat, ha le chiamate JavaScript generate a caldo da JavaScript stesso via document.write().

L'unica aggiunta che ho fatto io alle chiamate a OverLIB è questa:

onmouseover="return zoom('zoomata.png', 'Titolo simpatico')"

...al posto del solito:

onmouseover="return overlib('non mi ricordo esattamente i parametri')"

Nella funzione zoom è contenuta ovviamente la chiamata a overlib(), oltre ad altre cose:

function zoom(url, caption) {
	return overlib('[img]' + url + '[/img]', WIDTH, 55, HEIGHT, 55, LEFT, BORDER, 2, 
'24bit_pattern.jpg', CAPTION, caption);
}

To be continued...

[Mich_]

Ciao Nosferatu,

qualche dinosauro c'e` anocra (e non siamo proprio pochissimi).
Sono contento di risentirti.

Ciao
Michele

[Nosferatu]

In pratica come testo da passare a OverLIB ho messo un tag IMG completo, sfruttando l'evento "onload" che si scatena quando l'immagine è stata caricata, e raddoppiando la dimensione dell'immagine.
In questo modo, qualsiasi sia la dimensione dell'avatar, anche non necessariamente 65x65, al caricamento in "popup" viene subito ingrandito.

La DIV che lo contiene nei browser di sesta generazione (tutti ormai) viene auto ridimensionata.

Ho aggiunto un paio di parametri aggiuntivi per abbellire la "popup", come il testo informativo sull'avatar e un background sabbioso, e il gioco è fatto!



I risultati più fighi con OverLIB si ottengono usando una PNG con canale alpha come background della popup.
Ricordo che l'anno scorso ci avevo provato, ma Mozilla & Co. non erano molto diffusi, quindi avevo lasciato perdere.
NB: MSIE non è in grado di visualizzare il canale alpha delle PNG.

[goat]

Gentilissimo.
Grazie.

[var]

Nosferatu carissimo, un salutone anche da parte mia. :)