Pagina 1 di 1

mappatura immagine aaaaiuto

Inviato: dom 13 feb 2011, 18:31
da francescoloss
Buongiorno a tutti :D
Stò mappando una foto con dei personaggi,dovrei fare in modo che quando l'utente passa sopra a uno dei personaggi con il muse,si apra una finestrella o qualcosa di simile,con scritto chi è.
Ho provato e riprovato ma gimp mi obbliga a aprire un collegamento nuovo.Dove sbaglio??
(La mappa va inserita in un sito creato con joomla)Vi ringrazio Francesco

Re: mappatura immagine aaaaiuto

Inviato: lun 14 feb 2011, 14:56
da Lazza
Gimp non è un software per programmare siti web... Quello che vuoi fare va fatto in JS ad esempio, con le millemila librerie che ti danno effetti simili, come ad esempio Tipsy: http://onehackoranother.com/projects/jquery/tipsy/

Re: mappatura immagine aaaaiuto

Inviato: mar 15 feb 2011, 21:15
da francescoloss
Esatto :D
l'effetto è quello!
Provo il programma e ti so dire :wink:
Grazie

Re: mappatura immagine aaaaiuto

Inviato: mer 16 feb 2011, 9:59
da Lazza
Quale programma? Io ti ho indicato una libreria per Jquery, come IDE usa quello che vuoi. :P

Re: mappatura immagine aaaaiuto

Inviato: mer 16 feb 2011, 22:14
da francescoloss
Ciao
Ho guardato il link,non ne ho capito un mazza :cry:
Il codice dove devo aggiungerlo?
Mi sai indicare una pagina in italiano dove spiegano il tutto?
Ti ringrazio Francesco

Re: mappatura immagine aaaaiuto

Inviato: gio 17 feb 2011, 14:28
da Lazza
Si presume che tu sappia programmare in javascript, sennò è chiaro che ci metto un sacco a farti il corso completo... Poi chiaramente se vuoi programmare o sviluppare pagine web con l'inglese ci devi avere a che fare. :-)

Re: mappatura immagine aaaaiuto

Inviato: gio 17 feb 2011, 20:11
da francescoloss
Ciao :D
L'inglese lo mastico,ma come programmazione,uso il copia incolla :D .
I siti li faccio per passione non per alvoro,quindi... :(
So che ci sono software che sono in grado di creare l'effetto che cerco,ma sono a pagamento.
I siti che creo sono per società del posto (coro,unione sportiva,gruppo alpini)tutto rigorosamente free,programmi compresi.Se ti va,potresti dare un sguardo al sito(www.corovanoi.it)e darmi un consiglio su come fare con la foto in prima pagina?Con il passaggio del muse sulle teste dei coristi,dovrebbe apparire il nome di ognuno.

Re: mappatura immagine aaaaiuto

Inviato: gio 17 feb 2011, 20:21
da Lazza
francescoloss ha scritto:I siti li faccio per passione non per alvoro,quindi... :(
Neppure io, sono uno studente e non lavoro.
francescoloss ha scritto:So che ci sono software che sono in grado di creare l'effetto che cerco,ma sono a pagamento.
Cavolacci, che cosa sento... per carità non è vero che solo il software proprietario permette di lavorare sul web, anzi!!! :-)
francescoloss ha scritto:Se ti va,potresti dare un sguardo al sito(http://www.corovanoi.it)e darmi un consiglio su come fare con la foto in prima pagina?Con il passaggio del muse sulle teste dei coristi,dovrebbe apparire il nome di ognuno.
Non posso insegnarti a programmare, posso darti due dritte:
  • infarinati sul DOM
  • infarinati appena appena su Jquery
  • leggi la documentazione del plugin che ti ho linkato (Tipsy)
Una volta fatto ciò ti sarà molto facile capire che Tipsy può essere invocato col clic oppure il passaggio del mouse dell'utente su un determinato oggetto del DOM qualsiasi (comprese le "aree" che Gimp ti crea usando la mappatura dei link). Detto questo puoi "taroccare" il codice fatto da Gimp per evocare Tipsy ogni volta che è necessario.
Vedrò di farti un esempio se mi è possibile, anche se stiamo uscendo fuori dal seminato. ;)

Re: mappatura immagine aaaaiuto

Inviato: gio 17 feb 2011, 20:55
da Lazza
In realtà alla fine ho usato lo strumento di mappatura solo per farmi un'idea veloce delle coordinate, ma facevo prima a mano. In sostanza devi sapere:
  • costruire un rettangolo virtuale sulle facce (puoi farlo su un nuovo livello con Gimp)
  • per ciascuna faccia, calcolare larghezza e altezza del rettangolo in pixel, nonché coordinate (distanza dal bordo sinistro dell'immagine e da quello sopra)
  • associare a ogni rettangolo il nome della persona
Tutto ciò puoi farlo misurando con Gimp usando il misurino. Poi il codice da generare è assai semplice (e si riesce facilmente a capire leggendo la documentazione breve ma essenziale di Tipsy).

Scarica qui lo zip con l'esempio. Nota: ti ho messo apposta il bordo rosso sui rettangoli, basta che lo cancelli dal codice HTML per vedere l'effetto finale. :-) Inoltre ho dovuto racchiudere l'immagine in un DIV nel quale ho messo le stesse sue dimensioni in altezza e larghezza, sennò non funziona.