Home/ Questions/Q 6365209
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T00:15:53+00:00

I’m trying to understand, how does the code that make the page bellow to

  • 0

I’m trying to understand, how does the code that make the page bellow to work:
http://www.coloring.com/online/eagle-head-flag

All that I know is that the image loaded is a png 32 bits file.
I tried to understand the code in the file coloring.js that is loaded on the page. But I coundn’t. It looks so simple to be doing that.

The harder think for me to understand, is why, when the user color one of the flag’s stars for example, all of them get the same color.

I analyzed the image on fireworks, and it has no layers. So a really can not understand how it is done.

I also could not find any simple example on google, about how to do that.

Can someone help me, at least, where can I find a simple sample asbout this.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is actually pretty simple on the page, because the server handles the “coloring” of each region.

    When you click the image it sends an image request for this URL:
    http://image.coloring.com/pictures/single/eagle-head-flag?color=F69679&x=449&y=263

    enter image description here

    Where color is your current color, and x and y are the coordinates you clicked.

    The server returns an image that has the element you clicked on in the color you had selected. It then puts that image under the outline image. These are partly transparent so they can be stacked. You keep clicking and it keeps stacking.

    Not sure how they do it server side in order to know what element you click and how they are generating the images.

    The harder think for me to understand, is why, when the user color one
    of the flag’s stars for example, all of them get the same color.

    This is because the server thinks of those stars as a single element or region. Again how it decides that, there is no way to know without their server code.

    Lastly when you click done, it just generates a big URL with all the regions colored encoded in it, which the server can generate an image with that fills everything in:
    http://image.coloring.com/pictures/colored/aXSH3sI2wz9J/IaebaOnG5C/83b6Ulg2/8CwNyM5M/aKSc4Coh/Ojzg1BeO/CWW2uEJ6ao/zcTvWnSc/DXCbJuVU/N5ZrH71ZbuvwmhrH/D3szJmBY/85T0rLZo/1540n/eagle-head-flag.gif

    • 0