Creating a compound image - the chess board example
This example shows how a compound image can be produced from user input and some predefined images.
To position the pieces, set the radio button for the required piece. Then click on the board and the piece will be displayed.
Remove a piece by setting the radio button to an empty square.
 |
 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
The image on this page is created by tiling 64 smaller images in a 8 x 8 table. This is the traditional way of showing a compound image on a web page and in many cases this is adequate. Client side Javascript is used to change the images when a square is clicked. A Javascript function is used to set some hidden variables when the submit button is clicked. That way the board position is passed to the form handling script.
There is very little ASP scripting in this page, just a loop to generate 64 hidden variables. Most of the scripting is client side Javascript which can be seen by viewing the source code.
The ASP part of the demo (the part which receives the form data) can be viewed here.