JavaScript EditorBest javascript editor debugger     Ajax website 
↑


Main Page

Previous Page
Next Page

Using an Image to Submit Data

You may use an imagecalled an active imageas a combination input element and submit button. In addition to submitting the data from the other fields in the form, a click on the image sends the current mouse coordinates to the server in two name-value pairs.

To use an image to submit data:

1.
Create a GIF or JPEG image.

2.
Type <input type="image".

3.
Type src="image.url", where image.url is the location of the image on the server.

4.
Type name="label", where label will be appended by x and y and will identify the x and y coordinates sent to the server, when the visitor clicks the image.

5.
Type alt="description", where description will appear if the image does not.

6.
Type the final /> to finish the active image definition for the form.

Figure 17.51. If you use an active image, you don't need a submit button.


Figure 17.52. The same form can have both regular fields (like the radio buttons) and an image map. When the visitor clicks the map, all of the data is sent to the script.


Figure 17.53. This script outputs the coordinates from the mouse click in the image along with the radio button value.


Tips

  • Setting the value attribute has no effect. The values are set to the mouse coordinates automatically.

  • In a Perl script, the names are set to label.x and label.y for the x and y coordinates respectively, where label matches what you used in step 4 above, x is the horizontal distance in pixels from the image's left edge, and y is the vertical distance in pixels from the image's top edge. In a PHP script, the names are changed to label_x and label_y instead since PHP doesn't accept periods in variable names.

  • You can find the PHP script used in this example on my Web site (see page 26).



Previous Page
Next Page


JavaScript EditorBest javascript editor debugger     Ajax website 
→