Immagine di sfondo cliccabile con animazione 
Author: Igor D.Ciao a tutti,
vorrei realizzare un sito (personale) con un'immagine di sfondo cliccabile su vari elementi dell'immagine e magari inserirsci delle animazioni flash realizzate con SWiSH Max.
Ho letto gli altri argomenti su come creare la mappa con Gimp, ma non riesco a realizzare la mappa cliccabile, tantomeno le animazioni.
Ecco la procedura da me realizzata con Evo 10:
Dopo aver aperto un nuovo progetto ho impostato un'immagine a tutto schermo per ogni pagina del sito, ma è l'immagine della home page che voglia sia cliccabile e con animazioni.
Sono andato su proprietà della Home page, al passo 2, Grafica ed ho inserito l'immagine di sfondo con la disposizione "5 - Adatta al contenuto della finestra", mentre in Opzioni a dx, ho linkato "Crea la pagina senza applicare il modello" per non visualizzare il menù.
A questo punto ho creato la mappa con la stessa immagine utilizzata per sfondo e tramite Gimp 2.8.2 seguendo questa procedura:
Filtri - Web - Mappa immagini (ed ho evidenziato con le varie forme presenti a sx le parti linkabili)
dopo aver salvato il file mappa ho preso il codice html da Visualizza - Sorgente
Il codice l'ho copiato nella sezione "Esperto" di proprietà della pagina prima della chiusura dell'HEAD.....non so però come caricare con Evo 10 il file mappa creato.
Risultato nessun link.
E se volessi le parti cliccabili animate?
Grazie
Ho letto i vari post di Kolasim e Mirko boschetti. :-)
Buongiorno Igor,
se non l'hai ancora fatto puoi effettuare un ricerca su answers cercando "mappa cliccabile", sicuramente troverai diversi post sull'argomento.
Per le parti animate potresti inserire delle piccole animazioni vicine e collegarle al click del mouse.
Ovviamente dovresti fare tutto inserendo del codice personalizzato.
Magari qualche altro utente della comunity potrà darti maggiori dettagli.
Ciao Igor, una cosa cosi con delle immagini trasparenti al posto dei loghi che ho messo io potrebbe andare, le metti dove vuoi tu.....
http://mibo.altervista.org/calcio/divfixed1.html
Author
Ciao Mirko,
purtroppo non è l'esempio che avevo in mente anche se ho apprezzato molto le foto...:-)
Ho visto i precedenti post sulla mappatura delle immagini, mi sembra postato da te, ma a me non funziona. Ora non so se il motivo sia perchè ho impostato un'immagine a tutto schermo per ogni pagina del sito, mentre la mappatura funzionerebbe con un'immagine circoscritta.
E' corretto aver copiato il codice nella sezione "Esperto" di proprietà della pagina prima della chiusura dell'HEAD? Come carico con Evo 10 il file mappa creato?
Grazie
Non sò se come sfondo possa funzionare, con Gimp...perchè i link che ti crea, sono con le misure che hai messo nel programma di gimp, ma se poi lo metti un po più grande o più piccolo, i link vanno persi tutti...
Guarda questa prova, http://sitemibo.altervista.org/qqq/
ma non ha varie sezioni come chiedi tu...
Prova a vedere anche qui:
http://www.essedi.altervista.org/_sito/mappatura-immagine.html
http://www.essedi.altervista.org/_sito/con-css.html
I miei esempi valgono per immagini inserite in un oggetto HTML e, di conseguenza, all'interno del contenuto delle pagine.
Se ho capito bene, Igor vorrebbe una cosa simile per lo sfondo del sito, in porzioni esterne al contenuto delle pagine.
Personalmente non so essere di aiuto.
Author
Esse Di ha centrato il problema.
Gli esempi proposti da Mirko sono ottimi, ma sempre per un oggetto html, se la cosa si sposta allo sfondo del sito nascono i problemi.
Il primo esempio di mirko:
http://sitemibo.altervista.org/qqq/
è valido, ma permette un solo link e oltretutto senza alcuna possibilità di animazione.
Sia chiaro visto che l'animazione è difficile da realizzare nella mappatura, almeno per me, vanno anche bene delle immagini sovrapposte come nell'esempio:
http://www.essedi.altervista.org/_sito/mappatura-immagine.html
ciao Igor,
... in questi Argomenti puoi scoprire come realizzare una mappa complessa senza avere programmi, (ma se hai PainShopPro la otterresti con dei semplici click per il doppio rollover), ...e vedere alcuni esempi di confronto tra tipologie diverse ed animate: http://answers.websitex5.com/post/41871 http://answers.websitex5.com/post/37288
...
bye, KolAsim
Author
Ottimo KolAsim,
l'esempio del corpo umano:
http://www.zspace.it/kolasim/wsx5_v8/corpoumano/
è molto bello ed efficace.
Il tempo di capire bene come funziona con SwishMax...grazie
Author
ehm...ma come funziona?
ciao, ... è ancora disponibile nella radice il sorgente: corpoK.swi
.
bye
Author
perdona, ma su SwishMax4 non c'è.
... cosa intendi...?...
... il mio SWI si dovrebbe poter caricare anche su SM.4 ...
.
bye
Author
perdona il ritardo nel rispondere, Kolasim,
corpoK.s lo trovo tra gli esempi in biblioteca di Swish Max o devo copiarmi il codice dell'esempio?
Author
dall'esempio che mi mostri viene richiamato un file corpoK.swi ma dove lo trovo?
Scusa l'ignoranza- :-)
ciao, ...
, ...ti avevo indicato la radice, cioè qui: http://www.zspace.it/kolasim/wsx5_v8/corpoumano/corpoK.swi
bye, ...
Author
Perfetto, radice inserita, funziona con l'immagine del corpo umano.
Inserendo una diversa immagine, ho però la necessità di cambiare le selezioni, in che modo sono state realizzate? Si intuisce a mano libera, ma in che modo?
Nello specifico devo ricostruire le selezioni a, b, c, d, ed e.
Grazie e scusa ancora il ritardo, ma in questi giorni si lavora tanto. :-)
...
... puoi usare lo strumento BEZIER, (simbolo del pennino stilografico), per stendere il contorno della figura, facendo alla fine combaciare il punto finale con quello iniziale per chiudere la figura con colore uniforme...
... puoi anche usare una qualsiasi figura, per esempio un rettangolo, (metodo che preferisco), con sfondo semitrasparente,selezionarlo ed utilizzare lo strumento "Modifica Punti", (simbolo il cursore bianco con i baffi), aggiungendo sul perimetro nuovi punti vertice dei segmenti, da trascinare sulla figura per adattarli alla copertura della stessa, quindi ove occorra rendere i segmenti curvi per adattarli al perimetro della figura da coprire; ... per aggiungere/rimuovere punti e rendere i segmenti curvi ed altre opzioni, cliccare con il destro del mouse sul segmento e/o sui vertici...
... puoi vedere se possa tornarti utile questa spiegazione visiva che avevo fatto per il Forum Inglese con il programma madre EN, ove da un cuore sono passato ad uno scudo: http://www.zspace.it/kolasim/miei_files/swzonecom/varie/scudo/scudo_K.html ...e forse utile anche questo: http://www.zspace.it/kolasim/miei_files/provevarie/varie/bezier/Bezier_k_1_T.html
.
bye
Author
Ottimo,
sempre preciso e puntuale....mi metto subito al lavoro. Grazie
Author
Ciao Kolasim,
allora ho importato il sorce corpoK.swi, ho cambiato la figura,
ho adattato le parti selezionabili come hai detto tu eliminando o modificando i vertici, ma alla fine non funziona.
Probabilmente dovrei ricreare il tutto da zero. :-(
ciao,
... io purtroppo non sono in grado di aprire il mio SWI, ...ma cos'è che non funziona...?...
... ne riparleremo poi in altro momento, ...buona notte...
Author
L'immagine corpo umano funziona, ma se cambio immagine e modifico le parti selezionabili su altri punti della nuova immagine, lanciando l'esecuzione queste non si selezionano.
ciao,
... allegami due immagini, una reale e pulita, l'altra con evidenziate le zone che vuoi rendere sensibili, in modo da poterle ricreare io dentro a SwishMax(1) che ho sul vecchio PC dismesso...
... se mandi queste immagini, a fine settimana avvierò il vecchio PC e vedrò di ricreare un qualcosa di simile allo SWI che hai tu, che io purtroppo non posso caricare, essendo fatto con una versione successiva che avevo nel PC che è andato distrutto...
.
bye
Author
Non mi carica i file in jpg, risoluzione massima inferiore ad 1mb....non so che dirti.
Se mi mandi l'email personale te le mando
Grazie
kolasim(At)hotmail.com
(At) = @
.
ciao
Author
ahahahah....si si lo so che la "chiocciola" si chiama at (et), ma quando lo dici a qualcuno qui in Italia, ti dicono sempre di non aver capito. :-)
Grazie
,... e-mail ricevuta, ...avvierò il vecchio PC dismesso probabilmente Sabato/Domenica prossimi
.
ciao
Author
Ecco l'ottimo lavoro di Kolasim:
http://www.zspace.it/kolasim//miei_files/varie/igorAnswers/igor_1.html
http://www.zspace.it/kolasim//miei_files/varie/igorAnswers/igor_2.html
che ringrazio pubblicamente