HTML Forms give you a new way to use
images to send information.
Specifically, you can use the INPUT tag to
send information about where (or if) a user has clicked on an
image.
Like all INPUT tags, the IMAGE takes a NAME
and a TYPE attribute. The TYPE attribute should be "IMAGE".
The NAME attribute however should be set to
some value that
relates to the image being clicked. This NAME will be
used to specify which image was pressed and will be sent
with the coordinates of the mouse click as name/value pairs
in the HTTP message body. Specifically, the browser will add
something like the following to the HTTP body if you click on
an input image.
imagename.x=somnumber&imagename.y=somenumber
Of course, the basic tag also needs a value
for the SRC attribute that defines where the image to be displayed
is located.
Take a look at the following example:
The code to get the following input image
is listed below:
<FORM>
<INPUT TYPE = "IMAGE"
NAME = "afraid_icon"
SRC = "Images/afraid_icon.gif"
>
</FORM>
From above, if we clicked on this image at
the point (10,20), the browser would add the following to the HTTP
body:
afraid_icon.x=10&afraid_icon.y=20
Image Alignment and Style.
As with most images in HTML, you can easily
align the image with the ALIGN attribute that takes values of TOP,
MIDDLE, or BOTTOM.
Similarly you can take away the blue
highlight box around the image by specifying BORDER = "0".
Consider the following example:
The code for those two input buttons is
shown below:
<FORM ACTION = "POST"> <Here is some text.
Where will it be placed?
<INPUT TYPE = "IMAGE"
NAME = "afraid_icon"
SRC = "Images/afraid_icon.gif"
BORDER = "0"
ALIGN = "TOP"
>
<P>
Here is some text. Where will it be placed?
<INPUT TYPE = "IMAGE"
NAME = "afraid_icon"
SRC = "Images/afraid_icon.gif"
BORDER = "3"
ALIGN = "BOTTOM"
>
</FORM>
