php dynamically generate coords for image map

Question

I have a map with a grid on it. each cell of the grid will be a clickable area on the map via image map coords. I would like to do this dynamically to save writing all this code for the image maps, but I can't quite figure out the statement or equation i need to use. Here is an example of what I have of the image map so far.

<div style="text-align:center;" id="location_title">The Hearth Lands</div>
                        <img id="map1" src="./images/maps/regions/1.png" usemap="#map1" border="0" width="800" height="800" alt="" />
                        <map name="map1" id="_map1">
                            <area shape="rect" coords="0,0,50,50" href=""  alt="" title="" />
                            <area shape="rect" coords="50,0,100,50" href=""  alt="" title="" />
                            <area shape="rect" coords="100,0,150,50" href=""  alt="" title="" />
                            <area shape="rect" coords="150,0,200,50" href=""  alt="" title="" />
                            <area shape="rect" coords="200,0,250,50" href=""  alt="" title="" />
                            <area shape="rect" coords="250,0,300,50" href=""  alt="" title="" />
                            <area shape="rect" coords="300,0,350,50" href=""  alt="" title="" />
                            <area shape="rect" coords="350,0,400,50" href=""  alt="" title="" />
                            <area shape="rect" coords="400,0,450,50" href=""  alt="" title="" />
                            <area shape="rect" coords="450,0,500,50" href=""  alt="" title="" />
                            <area shape="rect" coords="500,0,550,50" href=""  alt="" title="" />
                            <area shape="rect" coords="550,0,600,50" href=""  alt="" title="" />
                            <area shape="rect" coords="600,0,650,50" href=""  alt="" title="" />
                            <area shape="rect" coords="650,0,700,50" href=""  alt="" title="" />
                            <area shape="rect" coords="700,0,750,50" href=""  alt="" title="" />
                            <area shape="rect" coords="750,0,800,50" href=""  alt="" title="" />

                            <area shape="rect" coords="0,50,50,100" href=""  alt="" title="" />
                            <area shape="rect" coords="50,50,100,100" href=""  alt="" title="" />
                            <area shape="rect" coords="100,50,150,100" href=""  alt="" title="" />
                            <area shape="rect" coords="150,50,200,100" href=""  alt="" title="" />
                            <area shape="rect" coords="200,50,250,100" href=""  alt="" title="" />
                            <area shape="rect" coords="250,50,300,100" href=""  alt="" title="" />
                            <area shape="rect" coords="300,50,350,100" href=""  alt="" title="" />
                            <area shape="rect" coords="350,50,400,100" href=""  alt="" title="" />
                            <area shape="rect" coords="400,50,450,100" href=""  alt="" title="" />
                            <area shape="rect" coords="450,50,500,100" href=""  alt="" title="" />
                            <area shape="rect" coords="500,50,550,100" href=""  alt="" title="" />
                            <area shape="rect" coords="550,50,600,100" href=""  alt="" title="" />
                            <area shape="rect" coords="600,50,650,100" href=""  alt="" title="" />
                            <area shape="rect" coords="650,50,700,100" href=""  alt="" title="" />
                            <area shape="rect" coords="700,50,750,100" href=""  alt="" title="" />
                            <area shape="rect" coords="750,50,800,100" href=""  alt="" title="" />

                            <area shape="rect" coords="0,100,50,150" href=""  alt="" title="" />
                            <area shape="rect" coords="50,100,100,150" href=""  alt="" title="" />
                            <area shape="rect" coords="100,100,150,150" href=""  alt="" title="" />
                            <area shape="rect" coords="150,100,200,150" href=""  alt="" title="" />
                            <area shape="rect" coords="200,100,250,150" href=""  alt="" title="" />
                            <area shape="rect" coords="250,100,300,150" href=""  alt="" title="" />
                            <area shape="rect" coords="300,100,350,150" href=""  alt="" title="" />
                            <area shape="rect" coords="350,100,400,150" href=""  alt="" title="" />
                            <area shape="rect" coords="400,100,450,150" href=""  alt="" title="" />
                            <area shape="rect" coords="450,100,500,150" href=""  alt="" title="" />
                            <area shape="rect" coords="500,100,550,150" href=""  alt="" title="" />
                            <area shape="rect" coords="550,100,600,150" href=""  alt="" title="" />
                            <area shape="rect" coords="600,100,650,150" href=""  alt="" title="" />
                            <area shape="rect" coords="650,100,700,150" href=""  alt="" title="" />
                            <area shape="rect" coords="700,100,750,150" href=""  alt="" title="" />
                            <area shape="rect" coords="750,100,800,150" href=""  alt="" title="" />

                            <area shape="rect" coords="0,150,50,200" href=""  alt="" title="" />
                            <area shape="rect" coords="50,150,100,200" href=""  alt="" title="" />
                            <area shape="rect" coords="100,150,150,200" href=""  alt="" title="" />
                            <area shape="rect" coords="150,150,200,200" href=""  alt="" title="" />
                            <area shape="rect" coords="200,150,250,200" href=""  alt="" title="" />
                            <area shape="rect" coords="250,150,300,200" href=""  alt="" title="" />
                            <area shape="rect" coords="300,150,350,200" href=""  alt="" title="" />
                            <area shape="rect" coords="350,150,400,200" href=""  alt="" title="" />
                            <area shape="rect" coords="400,150,450,200" href=""  alt="" title="" />
                            <area shape="rect" coords="450,150,500,200" href=""  alt="" title="" />
                            <area shape="rect" coords="500,150,550,200" href=""  alt="" title="" />
                            <area shape="rect" coords="550,150,600,200" href=""  alt="" title="" />
                            <area shape="rect" coords="600,150,650,200" href=""  alt="" title="" />
                            <area shape="rect" coords="650,150,700,200" href=""  alt="" title="" />
                            <area shape="rect" coords="700,150,750,200" href=""  alt="" title="" />
                            <area shape="rect" coords="750,150,800,200" href=""  alt="" title="" />

                            <area shape="rect" coords="0,200,50,250" href=""  alt="" title="" />
                            <area shape="rect" coords="50,200,100,250" href=""  alt="" title="" />
                            <area shape="rect" coords="100,200,150,250" href=""  alt="" title="" />
                            <area shape="rect" coords="150,200,200,250" href=""  alt="" title="" />
                            <area shape="rect" coords="200,200,250,250" href=""  alt="" title="" />
                            <area shape="rect" coords="250,200,300,250" href=""  alt="" title="" />
                            <area shape="rect" coords="300,200,350,250" href=""  alt="" title="" />
                            <area shape="rect" coords="350,200,400,250" href=""  alt="" title="" />
                            <area shape="rect" coords="400,200,450,250" href=""  alt="" title="" />
                            <area shape="rect" coords="450,200,500,250" href=""  alt="" title="" />
                            <area shape="rect" coords="500,200,550,250" href=""  alt="" title="" />
                            <area shape="rect" coords="550,200,600,250" href=""  alt="" title="" />
                            <area shape="rect" coords="600,200,650,250" href=""  alt="" title="" />
                            <area shape="rect" coords="650,200,700,250" href=""  alt="" title="" />
                            <area shape="rect" coords="700,200,750,250" href=""  alt="" title="" />
                            <area shape="rect" coords="750,200,800,250" href=""  alt="" title="" />
                        </map>

How can i create all of these areas with less code?

KOGI · Accepted Answer · 2011-06-06T21:58:24.420

7

$columns = 5;
$rows = 5;
$width = 50;
$height = 50;

for( $x = 0; $x < $columns; $x++ )
{
   for( $y = 0; $y < $rows; $y++ )
   {
      $a = ($x * $width);
      $b = ($y * $height);

      $coords = array( $a, $b, ($a + $width), ($b + $height) );
      echo '<area shape="rect" coords="'.implode( ',', $coords ).'" href="'.$href.'" alt="'.$alt.'" title="'.$title.'" />';
   }
}

You can see it in action here: http://codepad.org/MMKfY1zc

edited Jun 06 '11 at 21:58

answered Jun 06 '11 at 21:52

KOGI

3,959
2
24
36

lol. both of yours look like they would do the same job. KOGI's was just the easiest to implement my coordinates into a JS function. Thanks to you all! – chaoskreator Jun 06 '11 at 22:26

Midas · Answer 2 · 2011-06-06T22:14:49.603

2

<map name="map1" id="_map1">
<?php
$rows = 5;
$cols = 16;
$w = $h = 50;
for ($i = 0; $i < $rows; $i++) {
    for ($j = 0; $j < $cols; $j++)
        echo "\t", '<area shape="rect" coords=', $j * $w , ',', $i * $h, ',', ($j + 1) * $w, ',', ($i + 1) * $h, '" href=""  alt="" title="" />', "\n";
    echo "\n";
}
?>
</map>

Simple math. :P

edited Jun 06 '11 at 22:14

answered Jun 06 '11 at 22:03

Midas

7,012
5
34
52

Parse error: syntax error! whats with all the `,` thats not how you concatenate – Lawrence Cherone Jun 06 '11 at 22:11
@Lawrence Cherone: He's using parameter style echoing which is completely valid php. Please refer to the manual: http://us.php.net/manual/en/function.echo.php – webbiedave Jun 06 '11 at 22:16
@Lawrence: Sorry, I fixed it now. And that is valid syntax. I don't concatenate, I echo them apart using `,`. It's a micro optimization, because PHP doesn't have to concatenate them before echoing. Especially useful if you have to echo a lot like your huge image map. – Midas Jun 06 '11 at 22:16
on testing it first time around i got syntax error. well i learn something, thanks, it ,still, looks, ugly ,tho – Lawrence Cherone Jun 06 '11 at 22:18
Yes, I had a bracket after `for` which shouldn't have been there because there was no closing bracket. If you have only one line of code in a statement, you can leave the brackets. – Midas Jun 06 '11 at 22:19
Simple math, maybe. But I suck at math. lmao. Thanks guys. – chaoskreator Jun 06 '11 at 22:27

score 1 · Answer 3 · answered Jun 06 '11 at 22:07

1

like this:

<?php 

$i=0;
foreach(range(0,750,50) as $b){
    foreach(range(0,750,50) as $a){
        echo '<area shape="rect" coords="'.$a.','.$b.','.($a+50).','.($b+50).'" href=""  alt="" title="" />'."\n";
    }
    $i++;
    if($i==5){break;}
}

?>

answered Jun 06 '11 at 22:07

Lawrence Cherone

46,049
7
62
106

php dynamically generate coords for image map

3 Answers3