I am creating a portal for an italian website which will sport a nice region selector with an imagemap, and region highlighting with a javascript. I found a free and detailed image map of italy along with a combined png, but it was too small to be really useable, so I needed to put a bigger image; with that, I also needed to alter the imagemap coordinates to they matched the enlarged image… noway I was going to do that by hand!

So, after searching for a pre-made solution (which I obviously didn’t find)  I devised a very simple PHP script to do eaxctly that. The script puts the entire code for the image map inside a string variable, and then processes that string with a regular expression search and replace to change the values accordingly to my needs. I only needed to make the image two times bigger, mantaining the aspect ratio, but since I was going to publish this inside a guide, I said to myself “why not making it so you can change the aspect ratio as well”. So, if you want, you can make the imagemap two times larger, and 1.5 times taller.

Here’s the sample script (the $html variable is defined with a sample imagemap for the region of Lazio alone, for space purposes, but you can put whatever you want inside, I used it with the whole map of Italy, together with <map> tags and lines breaks/indentation). Be careful and ESCAPE the double quotes inside the HTML before pasting the code inside the string. In other words, simply put a backslash (the \ character) before each occurence of a double quote (the $quot; character) inside the HTML, I used the search and replace function of 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));
?>

All you need to do is change the parameters inside the regular expression (numbers in red), first is for horizontal proportion, second for vertical; in this example the imagemap will be resized to 2 times its length, and 1.5 times its height, if you want to make the size three times bigger, change it to

echo  preg_replace("/([0-9.]{2,}),([0-9.]{2,})/e","round(\\1*3,3).','.round(\\2*3,3)",htmlentities($html));

Then, copy the php script to your server, open it in a web browser, and copy/paste the result. Note: according the the way the imagemap is originally formatted, you may need to edit the regular expression to accomodate for spaces, tabs, linebreaks or whatever; in this case, since the coordinates were listed with just commas inbetween it was not needed. If you are stuck, write in the comments an excerpt of your imagemap code and I’ll try and help you.

Digiprove sealThis article has been Digiproved

Comments

comments