javascript - PHP: Fill block of an image with color and save the information


I'm looking to setup a page which holds an image of grid paper. These grids can be selected and depending on what type of link the user chooses the color will be filled and saved. Once all of the blocks are filled this will be archived and then a new sheet will be displayed. I wanted to use PHP / MySQL on the backend but was wondering what would be good client side?




Why a image for the grid? Better solution is to use a table or a list filled with divs to create the grid. Then use jQuery to fill in the backgrounds when the user clicks a link.

Example for the grid:

<ul id="grid">
    <div id="cell_id"></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>

CSS example:

    #grid {
        list-style: none;

    #grid li {
        height: 50px;

    #grid .cell {
        float: left;
        width: 100px;
        height: 50px;
        border: 1px solid black;

And finally use jQuery to fill the cells when a user clicks a link. You can find the cell by calculating the rows and cells or just give the cells a id. The saving part can be done by a AJAX call to a page that will save the information to the DB.

Simple jQuery example (you have to think up the rest yourself):

    $('link').click(function() {
        //place check for new sheet here 

        var id = $(this).attr('id');

        //set the bg color
        $('cell_id').css('background-color', 'red'); //or color code #FF0000

        //save the info
        $.post('save_info.php', { cell_id: id, color: "red" }, function(data) {

You can find more info and download jQuery at:

The jQuery code to create a new sheet when all the cells are filled can be done with a little check in the click function. This check must count all the cells that have a bg color, is this the same as the total cells? Then create a new sheet by removing all the cells their bg color and by setting new id's. But you can figure this out by yourself ;).

People are also looking for solutions to the problem: php - How I can derive count(*) from another table using LEFT JOIN mysql


Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

Write quick answer

Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.

Similar questions

Find the answer in similar questions on our website.