HTML and CSS Reference
In-Depth Information 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
discussed in Chapter 6 .
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.
Search WWH ::

Custom Search