Is it possible to increase scale of map but still can be hovered efficiently? [Using PHP GD]

I give you guys a brief detail about my project. I'm working on a web application which is a warehouse management system. Basically, I'm using PHP GD to draw an image of a factory's layout plan which contain racks and pallets on each floor.

When you hover on a rack or a pallet, you will be able to see the detail of it.

Because using GD, to be able to draw each rack or pallet, it need a specific coordinate of x and y, and also the width and height of it. I use the tag to create area so it could do the hovering with jquery.

I was asked to make a scale image with a given ratio and I wasn't able to figure out how to do it. So I think you guys can help me out.

Really need help on this.

Here are some example of my code

while($row = mysql_fetch_ar开发者_JS百科ray($RecordsetZone)){

        $n = substr($row['name'], 4);
    $font = 2;
    $textColor = imagecolorallocate ($source,0,0,0);
    if($row['zonetype']=="Rack"){
        imagerectangle($source, $row['xcord'], $row['ycord'] , $row['width']+($row['xcord']), $row['height']+$row['ycord'], $black);
        imagefilltoborder($source, ($row['xcord'])+1, $row['ycord']+1, $black , $limegreen);
        imagestring ($source, $font, ($row['xcord'])+2, $row['ycord']+5, $n, $textColor);
    }
    elseif($row['zonetype']=="Pallet"){
        imagerectangle($source, $row['xcord'], $row['ycord'] , $row['width']+($row['xcord']), $row['height']+$row['ycord'], $black);
        imagefilltoborder($source, ($row['xcord'])+1, $row['ycord']+1, $black , $dodgerblue);
        imagestring ($source, $font, ($row['xcord'])+5, $row['ycord']+2, $n, $textColor);
    }
}

this is how I drew the image by getting the x, y from the database

<map name="testmap" id="testmap">
  <?php $RecordsetZone = mysql_query($query, $cakewms) or die(mysql_error()); 
  while($row = mysql_fetch_array($RecordsetZone)){?>
   <area id=<?php echo '"'. $row['name']. '"';?> shape="rect" coords=<?php echo '"'. $row['xcord']. ','.$row['ycord']. 
    ',' . ($row['width']+$row['xcord']) . ',' . ($row['height']+$row['ycord']) . '"';?> href="#" alt="Sun" />
  <?php }?>
</map>

after that use map to create area for hovering

if I change the ratio, can I still hover on the right area?

You can use special JQuery plugin ImageMapster.

It allow resize image-maps, while they still stay with correct marked active zones.

So, you will need generate your image-map once, and recounting onresize will be the task of this plugin.

It can also be helpfull in other cases of working with imagemaps.