How can i send an image map area id to a php file?

I have an image map which displays categories for different types of food that are stored in a MySQL database. Each node at the bottom of a category is an area on a imagemap, when i click on this area i want it to send the associated product id of that product to a php file called show_products.php which will display the details of that product (i.e price, stock, name etc..)

my imagemap

<map name="frozen">
        <area coords="88,172,6,130" shape="rect" id="1001"> 
        <area coords="61,247,143,291" shape="rect" id="1002">
        <area coords="196,132,278,172" shape="rect" id="1003">
        <area coords="237,289,155,249" shape="rect" id="1004">
        <area coords="336,288,253,248" shape="rect" id="1005">
        <area coords="349,248,430,289" shape="rect" id="1006">
    </map>

I've tried to encapsulate the map in a form and submit the POST data through javascript, however my other php file still won't receive the id's associated with each area. How can i get these unique product id's sent to another php file where a user clicks on the associated area and the show_products.php page will display all the details of the selected product? Is there a more efficient way of doing this than manually addressing each area with an id?

Any help would be greatly appreciated.

Thank you.

Solution

You could potentially add the href attribute to your <area> element and add pass the id through php?

<area coords="88,172,6,130" href="show_products.php?id=<?= $product_id ?>" shape="rect" id="1001">

And then in your show_products.php get the id by doing

$product_id = $_GET["id"];