Sto creando un portale per un sito che avrà una simpatica cartina dell’Italia con le regioni cliccabili, messe in evidenza da un overlay in javascript. Ho trovato a questo scopo una imagemap già pronta e gratuita con relativa immagine di accompagnamento, ma era troppo piccola per essere utilizzabile, e quindi avevo bisogno di ingrandirla; allargare l’immagine è un compito elementare, ma modificare le coordinate della imagemap non era qualcosa che avevo intenzione di fare a mano!
Dopo aver cercato soluzioni già pronte, ma senza frutto alcuno, ho elaborato uno scriptino PHP che assolve esattamente questo compito. Questo script inserisce il codice HTML della image map in una stringa, e quindi elabora questa variabile di testo con una regular expression (se non conoscete le espressioni regolari non spaventatevi, all’inizio non ci capivo nulla neanch’io) che cerca e sostituisce i valori numerici al bisogno. A me serviva semplicemente di raddoppiare le dimensioni della cartina, lasciando ovviamente le proporzioni intatte, ma siccome sto pubblicando questa guida, ho deciso di modificare lo script (testato come funzionante) in modo che possa ridimensionare le coordinate in modo diverso per gli assi orizzontale e verticale, in modo che ad esempio possiate raddoppiare la larghezza di un’immagine, e dimezzare l’altezza.
Questo è uno script di esempio (la stringa $html è associata alle sole coordinate della regione lazio, per motivi di spazio, comunque potete copiare all’interno della variabile tutto il codice HTML della imagemap, compresi i tag <map>, i ritorni a capo e l’indentazione. Prestate attenzione a fare un ESCAPE delle doppie virgolette all’interno del codice HTML prima di inserirlo nella stringa, in altre parole dovete mettere un backslash (cioè il carattere \) davanti a tutte doppie virgolette (il carattere “) per non corrompere la definizione della stringa; per questo io ho usato la funzione cerca e sostituisci di Notepad++.
<?php
$html="<area href=\"#\" alt=\"state\" title=\"lazio\" shape=\"poly\" coords=\"74.513,86.938,75.667,87.365,75.667,88.007,74.744,89.077,75.436,90.467,76.359,90.039,77.857,90.039,78.319,90.039,79.127,90.788,79.588,91.857,79.588,92.606,80.049,93.034,80.51,93.034,81.317,94.103,81.779,94.852,82.24,94.959,83.74,94.852,84.201,94.959,85.123,94.959,86.392,94.103,87.43,93.141,88.122,93.141,89.39,93.141,89.967,92.713,91.351,90.895,91.813,90.895,92.274,91.216,93.196,90.895,94.349,90.788,94.926,90.467,96.31,89.825,96.886,90.467,96.656,90.895,95.849,91.323,95.387,92.072,94.234,92.072,92.965,92.713,92.505,93.676,92.505,94.317,92.734,94.959,91.928,95.28,91.813,95.922,91.467,96.778,92.505,98.382,92.505,99.023,92.505,99.986,91.928,101.804,91.928,103.194,92.734,103.837,94.234,103.623,96.31,104.264,97.579,105.013,99.309,106.51,102.191,108.543,103.229,108.543,104.728,109.077,106.113,110.361,106.574,111.965,106.804,113.035,106.574,113.783,106.574,114.425,105.882,114.853,105.305,115.067,104.844,115.067,104.728,116.029,104.728,117.099,104.152,118.061,103.46,118.703,102.999,119.345,102.999,120.093,101.961,120.308,100.23,120.735,99.539,120.308,98.271,119.345,96.656,118.489,95.156,118.275,92.965,118.489,91.005,118.703,89.39,116.885,89.506,116.029,88.122,114.639,85.931,113.997,83.97,112.607,81.548,110.574,78.55,107.687,77.627,105.869,76.128,104.692,74.975,102.874,73.706,101.056,71.745,99.023,70.131,97.098,67.594,94.959,69.093,93.676,70.131,92.606,70.592,91.216,70.592,90.039,71.745,89.611,72.553,88.649,73.014,88.221,72.553,86.938,73.245,86.189,74.513,86.938\" />";
echo preg_replace("/([0-9.]{2,}),([0-9.]{2,})/e","round(\\1*2,3).','.round(\\2*1.5,3)",htmlentities($html));
?>
Tutto quello che dovete fare è cambiare i parametri di ridimensionamento evidenziati in rosso, nell’esempio la mappa immagine viene raddoppiata orizzontalmente, e moltiplicata di una volta e mezzo verticalmente. Se volete aumentare le dimensioni di tre volte, usate questa riga:
echo preg_replace("/([0-9.]{2,}),([0-9.]{2,})/e","round(\\1*3,3).','.round(\\2*3,3)",htmlentities($html));
Una volta fatto, copiate lo script PHP sul vostro server, apritelo con un browser, e fate copia/incolla. Fate attenzione ad un particolare: nel mio esempio la image map conteneva solo le coordinate separate da virgole e nient’altro, quindi ho dovuto usare questa espressione regolare… se nel vostro caso tra le coordinate sono presenti spazi, tabulazioni o altre cose, avrete quasi sicuramente bisogno di modificare l’espressione per farla funzionare. Se siete persi, scrivete nei commenti con un estratto dal codice HTML della imagemap e vedrò di darvi una mano.
