Ridimensionare, espandere o ridurre una image map HTML con uno script PHP




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.

This article has been Digiproved




5 commenti su “Ridimensionare, espandere o ridurre una image map HTML con uno script PHP”

  1. Nice work, Ephestione! I was doing the same search for a pre-made solution and found you. It works perfectly for me. I modified it into the following function, which allows me to pass in the width and height variables to resize based on a ratio. It seems to work this way, but I need to do more testing. The $map is a string containing the HTML for the map that I actually store separately on the server as an *.htm file and retrieve using the PHP function get_file_contents().

    function ScaleMap ($origw, $neww, $origh, $newh, $map) {
    $wratio = $neww / $origw;
    $hratio = $newh / $origh;
    $str = preg_replace(“/([0-9.]{2,}),([0-9.]{2,})/e”, “round(\\1*” . $hratio . “,3).’,’.round(\\2*” . $wratio . “,3)”, $map);
    return $str;
    }

    Thanks again for sharing this.

  2. hey there, thank you for your appreciation, and also thank you for leaving a very useful addition to this article 😉
    This way it appears you can output a resized imagemap on the fly depending on the visitor’s needs, maybe a way to fit something to the detected screen resolution

Rispondi a Marko Annulla risposta

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *