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.
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.
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
Thanks, you guys (girls?) saved me from having to redo 15 maps with like 30 shapes on each 🙂
Happy to hear that Marko… and it’s a single guy here, no plural needed 😀
Thank you, very helpful !
Work perfectly for me.