[Risolto] problema con immagini mappate

[xnotar]

Buongirno a tutti.
Ho un problemino...
Devo costruire una homepage con un'immagine mappata (per intenderci quelle immagini che hanno una o più aree cliccabili).
Ho preso la mia bella immagine e l'ho mappata tutta tramite il filtro web contenuto in Gimp.
Ora il problema è che una volta creato il modulo che contiene l'immagine e tutto il suo codice di mappatura, le aree sensibili risultano spostate rispetto a come le ho mappate.
Ho fatto una prova in html puro senza usare joomla (joomla 3.5) e tutto risulta regolare, dunque è da escludere che sia l'editor che ho usato.
Forse mi sfugge qualche cosa
Qualche idea in merito???
Grazie a tutti.
 

[zent]

Non ti so rispondere in merito, ma se fossi in te proverei il modulo: JA Image Hotspot

[xnotar]

Ok, grazie. Lo provo e faccio sapere.

[xnotar]

Provato, ma quello fa solo mettere dei punti di riferimento sule immagini e cliccandogli sopra può aprire un popup o un link, io invece devo mappare alcune aree dell'immagine con perimetri ben definiti.
Grazie lo stesso comunque.

[$Red]

Ciao, forse mi sbaglio ma secondo me il problema è dovuto dalle dimensioni dell'immagine, la mappatura delle immagini tramite software come gimp avviene calcolando tot. px da ogni lato dell'immagine, quindi quando carichi l'immagine nel sito se non ha le dimensioni idonee al dispositivo ed allo spazio in cui la inserisci i browser la ridimensionano, per capirci le dimensioni che si leggono quando si analizza un immagine su un sito web che riporta dimensioni immagine ... e ridimensionata in html a px n. e px n., la soluzione potrebbe e dovrebbe essere preparare la singola immagine per ogni tipo di dispositivo desktop, smarthphone, tablet, ecc..., poi tramite mediaquery css o Responsive utilities di bootstrap impostare ogni immagine al dispositivo corretto.

[xnotar]

Mi sa che hai ragione. L'immagine è larga 1632px mentre il corpo del template se non ricordo male è impostato in % all'85%.
Appena rientro provo a portarlo in pixel a 1632 come l'immagine poi vi aggiorno.

[$Red]

attenzione però perche le dimensioni totali del template inglobano anche gli altri elementi, spazi moduli laterali, spazi tra le varie posizioni, ecc..

[xnotar]

attenzione però perche le dimensioni totali del template inglobano anche gli altri elementi, spazi moduli laterali, spazi tra le varie posizioni, ecc..

Infatti e qui nasce il problema...
Ho portato la larghezza del corpo centrale in pixel e impostato a 1632 come l'immagine, ma non è cambiato nulla. Però il mio dubbio è...
Nel css del template (helyx3) ho dato le misure di 1632px solo al corpo centrale, non al resto, dunque le parti laterali dovrebbero restringersi o allargarsi per adeguarsi alla misura impostata al corpo centrale o sbaglio?
Se è come dico io, non capisco perché non venga rispettata la mappatura, mentre se devo tenere conto di tutto come dici tu, come posso fare a calcolare la misura corretta per l'immagine?

[xnotar]

Aggiorno...
Ora analizzando con la pagina, tramite Firefox, noto che il corpo centrale non è 1632px, ma 1602px, dunque nel css dovrei allargare ancora di 30px e portarlo a 1632.
Provo...

[xnotar]

Rieccomi...
Credo di aver risolto.
Nel css la misura del corpo centrale in pixel deve essere (nel mio caso) pari all'immagine 1632, ma i marigni destro e sinistro vanno portati a zero. Questi erano impostati a 15 e 15. Modificati e impostati a zero, ora la mappatura sembra andar bene.

Per semplicità posto i parametri che ho settato:

Codice: [Seleziona]

{.container{width:1632px}}
{padding-right:0;padding-left:0}
Ora mappo per bene tutta l'immagine e spero che anche con il resto rimanga tutto in ordine.

[xnotar]

OK! Tutto in ordine!
Dunque confermo di aver risolto.
Modifico il titolo.

[$Red]

secondo me cosi quando viene visualizzato su dispositivi con grandezze diverse da quelle su cui lo stai visualizzando tu la mappatura dell'immagine verrà "sballata", hai provato a testare da diversi dispositivo o ad utilizzare il tool del browser? ad esempio per firefox strumenti/sviluppo web/modalità visualizzazione flessibile

[xnotar]

Dal tool di Forefox ho capito quale era il problema sulle dimensioni.
Su altri monitor devo ancora provare, esempio dal cellulare, ma essendo responsive non dovrebbe adattarsi automaticamente o dico una castroneria?
Comunque appena riesco provo e aggiorno.

[$Red]

certo se il sito è responsive l'immagine si adatterà alle dimensioni del dispositivo, ma non il codice di mappatura creato da gimp che come ti ho scritto sopra viene creato in base a distanza in px dai bordi dell'immagine quindi, nel momento in cui quell'immagine viene ridimensionata quelle distanze nel codice non corrisponderanno all'immagine ridimensionata in html, per questo và creata un' immagine per ogni dispositivo è mappata ogni immagine!

[xnotar]

Mmm!
Ma sarebbe impossibile creare un'immagine per ogni dispositivo, i display hanno tutti dimensioni diverse.
Tu dici che i browser dei vari dispositivi non fanno un calcolo (se così possiamo chiamarlo) automatibamente?

[$Red]

Non é impossibile è una questione di risoluzione e 1024x768 800x600 ecc..., non di grandezza dello schermo, in realtà andrebbe fatto sempre

[xnotar]

Ok, capito!
Ho provato e in effetti è come dici tu.
Dunque le mappature dovrebbero cambiare in base alla risoluzione impostata anche per i monitor dei pc desktop oltre che per i dispositivi mobili, quindi è impossibile creare una pagina che vada bene per chiunque si connetta?

[xnotar]

Ho fatto un'altra prova.
Le mappature si spostano non in base alla risoluzione intesa come numero di pixel, ma al rapporto 4:3  16:9  5:4  16:10.
Prendiamo in considerazione i primi due (per gli altri due non ho mai visto monitor che li gestiscano), allora basterebbe creare le due immagini e mapparle per quel tipo di rapporto secondo te?
Però mi viene un dubbio...
I telefoni in orizzontale sono in 16:9 ma in verticale che rapporto usano, non credo sia 4:3 e per i tablet sarà la stessa cosa?

  Sto andando in paranoia. Cosa è meglio fare? Lasciar perdere la costruzione di una pagina del genere o vale la pena sbattersi senza mai avere la certezza che tutti possano visualizzare correttamente il sito?

[$Red]

stai facendo confusione, l'aspetto è proporzionale alla risoluzione e viceversa! ti basta creare 3/4 immagini, smarthphone, tablet, desktop e, opzionalmente secondo me, la large desktop per risoluzioni oltre i 1920px di wide.

[xnotar]

stai facendo confusione, l'aspetto è proporzionale alla risoluzione e viceversa! ti basta creare 3/4 immagini, smarthphone, tablet, desktop e, opzionalmente secondo me, la large desktop per risoluzioni oltre i 1920px di wide.

Aspetta, perché io ho un monitor full 1920x1080 (16:9:) ed ho fatto il lavoro usando questo monitor così impostato. Ora ho provato a cambiare i vari rapporti ed ho notato che qualsiasi risoluzioni imposto, lasciando il rapporto in 16:9, la mappatura è corretta, mentre impostando una qualsiasi altra risoluzione in 4:3 la mappatura va fuori completamente dai punti mappati, dunque se uno ha un monitor impostato a 4:3 non potrà vedere correttamente la mappatura. Ecco perché pensavo di farne 2 di immagini, poi però pensavo ai dispositivi mobili che non credo abbiano la risoluzione a 4:3.
Un altro problema è...
Ammesso che io faccia 3 o 4 mappe su immagini con dimensioni diverse, poi come le gestisco in Joomla per far visualizare quelle giuste ai vari dispositivi?