A fast way (or alternate way) to dynamically load 40000 links in an image map?

I'm bringing back a GD Image which is generated from user information in a database, now on the page where this image is viewed. I have the following area map for the image generated by the same sort of query to create a link to that users profile. However, there are a possible 40000 users in the database... anyway, what I have IS working, but as you can imagine it takes a long while for it to load.

<map id="pixel" name="pixel">

<?
    $map_x_1 = 0;
    $map_y_1 = 0;

    $map_x_2 = 5;
    $map_y_2 = 5;

    $block_num = 1;

    while ($map_y_2 <= 1000) {

        while ($map_x_2 <= 1000) {

            $actual_x_cood = $map_x_1+1;
            $actual_y_cood = $map_y_1+1;

            $grid_search = mysql_query("SELECT *
                            FROM project
                            WHERE project_x_cood = '$actual_x_cood' AND project_y_cood = '$actual_y_cood'") or die(mysql_error());

            $block_exists = mysql_num_rows($grid_search);

            if ($block_exists == 1) {

                echo("<area shape=\"rect\" coords=\"$map_x_1, $map_y_1, $map_x_2, $map_y_2\" href=\"/block开发者_如何学Go/$block_num/\" alt=\"\" title=\"$block_num\" />\n");

            } else {

                echo("<area shape=\"rect\" coords=\"$map_x_1, $map_y_1, $map_x_2, $map_y_2\" href=\"/block/$block_num/\" alt=\"\" title=\"$block_num\" />\n");

            }

            $map_x_1 = $map_x_1 + 5;
            $map_x_2 = $map_x_2 + 5;

            $block_num = $block_num+1;  

        }

        $map_y_1 = $map_y_1 + 5;
        $map_y_2 = $map_y_2 + 5;

        $map_x_1 = 0;
        $map_x_2 = 5;

    }
?>

</map>

I was thinking about just throwing in a quick jquery load screen over the top in a div and then hiding it once the page has fully loaded so it looks nicer. But I'm not really too happy with the idea of it since I would just like to load it faster.

So is there a quicker way to do it, maybe PHP? JS? Thanks!

You should consider using an input:image element. It will retreive the x-y coords as built-in functionality, and can be used in JavaScript or as part of the submission of a form.

After receiving the x-y coords, you can use a quad-tree or other algorithm for quick spacial-searching in your dataset.

you should capture the coordinates in the image map (easy with jquery) and pass it to the server which then calculates the user clicked.

i did something similar with a rate bar that hat hat 100 values (1-100%). but it was done in prototype so the code wont help you much.

small hint: i had to substract the left position of the container from the absolute click position.

in php and forms its not so flexible but far easier. you can just specify an input type image. the coordinates will be passed as post variables.

something like

will suffice