HTML and CSS Reference
In-Depth Information
9.5.4.3. Custom image buttons
The
image
type of form
<input>
element is a special submit button made
out of a picture that, when selected by the user, tells the browser to
submit the form to the server. Upon submission, the browser also in-
cludes the X,Y coordinates of the mouse pointer within the image in the
form's parameter list, much like the mouse-sensitive image maps we
Image buttons require an
src
attribute and, as its value, the URL of the
image file. You can include a
name
attribute and a descriptive
alt
at-
tribute for use by nongraphical browsers. Although it is deprecated in
HTML 4, you also may use
align
to control alignment of the image with-
in the current line of text. Use the
border
attribute to control the width,
if any, of the frame that Netscape and Firefox put around the form im-
age, much like the
border
attribute for the
<img>
tag. (Neither Internet
Explorer nor Opera puts borders around form
<input>
images.)
Here are a couple of valid image buttons:
<input type="image" src="pics/map.gif" name="map" />
<input type=image src="pics/xmap.gif" align=top name=map>
The browser displays the designated image within the form's content
flow. The second button's image is aligned with the top of the adjacent
text, as specified by the
align
attribute. Netscape and Firefox add a bor-
der, as they do when an image is part of an anchor (
<a>
) tag, to signal
that the image is a form button.
When the user clicks the image, the browser sends the horizontal offset,
in pixels, of the mouse from the left edge of the image and the ver-
tical offset from the top edge of the image to the server. These values
are assigned the name of the image as specified with the
name
attribute,
followed by
.x
and
.y
, respectively. Thus, if someone clicked the im-
age specified in the first example, the browser would send parameters
named
map.x
and
map.y
to the server.
