Home
-»
Network
-»
Coordinate delle zone di un'immagine
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.
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
Per Linux:
https://gnomecoder.wordpress.com/screenruler/
Dopo averlo scaricato e aperto, lo posizionate sulla vostra 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:
- Distanza del lato sinistro dall'asse Y (misurata sull'asse X)
- Distanza del lato superiore dall'asse X (misurata sull'asse Y)
- Distanza del lato destro dall'asse Y (misurata sull'asse X)
- 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."
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:
- Zona circolare (<area shape=”circle”>): bisogna indicare, in ordine, le coordinate del centro (x e y) e la misura del raggio in pixel (es: "90,58,3").
- Zona poligonale (<area shape=”poly”>): bisogna indicare tutte le coordinate (x e y) dei vertici del poligono (es: "x1, y1, x2, y2, ..., xn, yn", ovvero: "59, 31, 28, 83, 91, 83").
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.
Aiuta il sito! Condividi questa pagina su: