[js] Javascrip Che Fa Lo Zoom Su Immagini E Link

[Aiku]

Ciao a tutti!

Premetto che pur avendo una discreta conoscenza di html, css e grafica web, non sono un'esperta nell'uso di javascript, anche se mi è capitato di usare spesso alcuni codici "free" che ho trovato in internet.

Volevo sapere se potevate aiutarmi ad ottenere un effetto "zoom" simile a quello usato in questo sito: http://milliondollarhomepage.com/ (cliccate su "zoom" appena sopra il menu, e vedrete di cosa sto parlando)...

In pratica vorrei ottenere un effetto "ingrandimento" ogni volta che passo "on mouse over" su un'immagine-link.

Come detto non ho la minima idea di come scrivere il codice, ma se qualcuno potesse aiutarmi a trovarlo da qualche parte on line o almeno aiutarmi a realizzare un effetto simile, sarebbe fantastico!

Grazie per l'aiuto. :-)

Gio

[Prozac]

Ciao a tutti!

Premetto che pur avendo una discreta conoscenza di html, css e grafica web, non sono un'esperta nell'uso di javascript, anche se mi è capitato di usare spesso alcuni codici "free" che ho trovato in internet.

Volevo sapere se potevate aiutarmi ad ottenere un effetto "zoom" simile a quello usato in questo sito: http://milliondollarhomepage.com/ (cliccate su "zoom" appena sopra il menu, e vedrete di cosa sto parlando)...

In pratica vorrei ottenere un effetto "ingrandimento" ogni volta che passo "on mouse over" su un'immagine-link.

Come detto non ho la minima idea di come scrivere il codice, ma se qualcuno potesse aiutarmi a trovarlo da qualche parte on line o almeno aiutarmi a realizzare un effetto simile, sarebbe fantastico!

Grazie per l'aiuto. :-)

Gio

Lasciamelo studiare un po' e ti faccio sapere (B)

[Prozac]

Lasciamelo studiare un po' e ti faccio sapere (B)

Allora, visto che stamattina a fantasia non sono messo troppo bene, mi sono guardato un po' il codice usato sul sito di million dollar homepage (ma è possibile che un 21enne sia riuscito a fare così tanti soldi con un'idea così semplice??? :ranting2: ).

L'idea di fondo utilizza javascript insieme ai CSS. Nel sito è presente un'immagine che rappresenta l'intera area della homepage (quella dove ci sono le immagini dei clienti). In pratica si tratta di uno screenshoot unico di 2000x2000 pixel. Questa immagine inizialmente è "non visibile": lo stile ha la proprietà display = "none". Quando premi sul pulsante di zoom innesti questo meccanismo:

- mette una variabile globale e booleana a true (per indicare al gestore degli eventi del mouse che si vuole lo zoom)

- cambia la proprietà display dell'immagine descritta poco sopra a "block" (la rende, in pratica, visibile).

Per gestire gli eventi generati dal mouse, viene utilizzata un unica funzione che ad un certo punto controlla la variabile dello zoom (la chiama bZ). Se questa è true, è richiesto lo zoom.

Questa parte di codice non fa altro che modificare alcune proprietà dello stile (style) dell'immagine screenshoot descritta all'inizio:

- left

- top

- clip

var x,y,x1,x2,y1,y2,dx=0,dy=0;
fact=2;
opp=100;

x=event.x; //catturo la posizione x del mouse
y=event.y; //catturo la posizione y del mouse

dx=window.document.body.scrollLeft;
dy=window.document.body.scrollTop;

x1=-opp+(x+dx)*fact;	//left
y1=-opp+(y+dy)*fact - (document.body.scrollTop*fact);	//top
x2=+opp+(x+dx)*fact;	//right
y2=+opp+(y+dy)*fact - (document.body.scrollTop*fact);	//bottom

//een è l'immagine screenshoot
document.getElementById('een').style.left=(x+dx)*(1-fact);
document.getElementById('een').style.top=(y+dy)*(1-fact) + document.body.scrollTop;
document.getElementById('een').style.clip="rect(" +y1 +"px," +x2 +"px," +y2 +"px,"+x1 +"px)";

[Aiku]

Grazie per la risposta!

Dunque...credo di aver capito il concetto di base, ma non sono sicura di come applicarlo esattamente. In pratica mi stai dicendo che oltre all'immagine di base, devo crearne una grande il doppio che sia "nascosta" e attivata in un secondo tempo schiacciando un pulsante, giusto?

Ora...dove inserisco le due immagini? Devono essere inserite in due <div> diversi? Dove e come inserisco il codice che mi hai scritto? Come devo "scrivere" il bottone di zoom? Ah e come facco a settare l'immagine come invisibile?

Come avrai capito, di programmazione e javascript non ne capisco assolutamente niente, se mi puoi guidare passo per passo te ne sarei grata (sperando non sia troppo complicato)...

Grazie ancora!

[Prozac]

Grazie per la risposta!

Dunque...credo di aver capito il concetto di base, ma non sono sicura di come applicarlo esattamente. In pratica mi stai dicendo che oltre all'immagine di base, devo crearne una grande il doppio che sia "nascosta" e attivata in un secondo tempo schiacciando un pulsante, giusto?

Ora...dove inserisco le due immagini? Devono essere inserite in due <div> diversi? Dove e come inserisco il codice che mi hai scritto? Come devo "scrivere" il bottone di zoom? Ah e come facco a settare l'immagine come invisibile?

Come avrai capito, di programmazione e javascript non ne capisco assolutamente niente, se mi puoi guidare passo per passo te ne sarei grata (sperando non sia troppo complicato)...

Grazie ancora!

Facciamo così, mi dai un po' di tempo e te ne preparo uno ad-hoc, un po' diverso da quello di One Million Dollar Hompage (anche perchè non mi va con Firefox quello...)

Rettifico

In rete ho trovato quello che fa per te (B) Funziona bene sia con Internet Explorer che con Firefox:

Image Magnifier

Se visualizzi la pagina trovi anche tutto il codice ben documentato...

RI-

[Aiku]

Facciamo così, mi dai un po' di tempo e te ne preparo uno ad-hoc, un po' diverso da quello di One Million Dollar Hompage (anche perchè non mi va con Firefox quello...)

Ah, ma sei un angelo!! Prenditi tutto il tempo che vuoi...

Grazie ancora.

[Prozac]

Ah, ma sei un angelo!! Prenditi tutto il tempo che vuoi...

Grazie ancora.

Se non capisci bene come funziona il codice di magnifier chiedi pure :up1:

[Aiku]

Se non capisci bene come funziona il codice di magnifier chiedi pure :up1:

Scusa se non ho risposto proma, ma sono stata a letto con la febbre per tutta la settimana... :sigh:

Grazie mille per il codice!!! Gli darò un'occhiata più da vicino appena possibile (ancora non sono guarita del tutto), spero di riuscire a capirci qualcosa, in caso di difficoltà ti verrò a rompere le scatole ancora... ;-)

Grazie di tutto!

[Prozac]

Scusa se non ho risposto proma, ma sono stata a letto con la febbre per tutta la settimana... :sigh:

Grazie mille per il codice!!! Gli darò un'occhiata più da vicino appena possibile (ancora non sono guarita del tutto), spero di riuscire a capirci qualcosa, in caso di difficoltà ti verrò a rompere le scatole ancora... ;-)

Grazie di tutto!

In bocca al lupo di pronta guarigione (B)