Coordinate delle zone di un'immagine

Visita anche Risorse per i webmaster
archivio di risorse per la creazione dei siti web
Dividere un'immagine in zone e ricavarne le coordinate non è cosa intuitiva, anzi, di primo acchito può creare parecchia confusione nella testa. Per quanto io abbia cercato e ricercato in rete, non ho trovato un programma semplice che faccia questo tipo di lavoro. Sicuramente, esiste la funzione all'interno di molti programmi di grafica, ma, anche in questo caso, non è facile. Ho trovato questo programma online: http://www.maschek.hu/imagemap/imgmap che può essere utile, ma esiste anche un metodo manuale che ora vi spiego.
Io mi sono organizzata in questo modo....

Con un programma di grafica, come, per esempio, il mio amatissimo Photofiltre, disegno una griglia sopra ad una copia dell'immagine che voglio mappare e la salvo.
Coordinate delle zone di un'immagine
Fatto questo, con l'aiuto di un leggerissimo e semplicissimo programmino, che non è altro che un righello, posso misurare qualunque distanza in pixel.
Ci sono molti tipi di righelli scaricabili in rete. Ve ne suggerisco alcuni di esempio:

Per Windows:
https://www.arulerforwindows.com/

Per Mac:
https://apps.apple.com/ie/app/free-ruler/id1483172210?mt=12

Aggiornato su segnalazione in data 16 gennaio 2024-->

Per Linux:
https://gnomecoder.wordpress.com/screenruler/

Dopo averlo scaricato e aperto, lo posizionate sulla vostra immagine....
Coordinate delle zone di un'immagine
....e misuro le distanze, calcolando le coordinate corrispondenti alle zone che voglio mappare.

Riferendoci ai quattro che delimitano una zona quadrata, o rettangolare, le coordinate necessarie sono quattro e così distribuite:
  1. Distanza del lato sinistro dall'asse Y (misurata sull'asse X)
  2. Distanza del lato superiore dall'asse X (misurata sull'asse Y)
  3. Distanza del lato destro dall'asse Y (misurata sull'asse X)
  4. Distanza del lato inferiore dall'asse X (misurata sull'asse Y)
Dove l'asse X corrisponde al righello orizzontale  e l'asse Y corrisponde al righello verticale.
Facciamo qualche esempio:

Il primo quadratino, in alto a sx, avrà coordinate 0,0, 80, 90, perchè il lato sinistro si trova esattamente sull'asse Y (righello verticale) e quindi a distanza 0 da essa; il lato superiore si trova esattamente sull'asse X (righello orizzontale) e quindi a distanza 0 da essa; il lato destro si trova a 80 px di distanza dall'asse Y e il lato inferiore si trova a 90 px di distanza dall'asse X.

Analogamente, l'ultimo quadratino, in basso a dx, avrà, invece, coordinate 320, 180, 400, 263.
Una volta ottenute le misure, potete utilizzarle per l'immagine originale senza griglia.

Non è indispensabile creare la griglia, potete anche definire, singolarmente, ogni zona. Il metodo di misurazione non cambia."
Coordinate delle zone di un'immagine
Le zone non devono essere, necessariamente, rettangolari, ma possono avere altre forme: circolare (circle) e poligonale (poly).
La misurazione, nel caso di zone circolari, o poligonali, va fatta in questo modo:
E questo è tutto.

Leggi anche: Mappa di un'immagine responsive con zone cliccabili


Nella sezione "Strumenti per i webmaster" puoi trovare moltissime soluzioni e risorse da scaricare.

Continua con:

Leggi anche: Creare un sito da zero