Image
A bit of disambiguation: in this document, I am referring to the button form element (<input type="image">) rather than the HTML image object (<IMG>).
Basics
Bare-bones code for an image is:
<INPUT TYPE="image" SRC="image.gif">
Usage
I can't see a good use for an image input type. I've seen them used as a quick and dirty way to create a "pretty" submit button for a form and as a method for a user to indicate a location on a map graphic as part of a form, but it seems to me there are better ways to do either of those things.
Processing
An image input type passes two name=value pairs to the server: name.x and name.y - with "name" being the NAME attribute of the input element and x and y being the coordinates at which the user clicked (starting at 0,0 in the top left).
HTML Attributes
Typical
- SRC - URL of the image.
- HEIGHT - Height of the image, in pixels.
- WIDTH - Width of the image, in pixels.
- BORDER - Thickness of the border around the image (some browsers will add one by default, and color it as a link).
- ALT - Alternative text for the image.
Unusual
- VSPACE - A padding of pixels above and below (use CSS style instead)
- HSPACE - A padding of pixels left and right (use CSS style instead)
- ALIGN - The horizontal or vertical alignment of the image.
- DISABLED - Grays out the element and prevents the user from altering its value.
- TABINDEX - Specified as a number, this alters the default tabbing order of a form.
- ACCESSKEY - A shortcut key to put focus on the element.
JavaScript
The image input type has a blend of attributes - combining the attributes of an <IMG>> and an <INPUT>>
Properties
- onchange - Takes effect when the value is changed (an option is selected)
- src - The URL of a the graphic file.
- lowsrc - The URL of a low-resolution graphic, to be loaded and rendered before the main image (on the premise the intended image may take a while to download).
- complete - A boolean value indicating whether the image is completely loaded.
- height - The height of the image, as specified by the HEIGHT attribute.
- width - The width of the image, as specified by the WIDTH attribute.
- border - The thickness of the border around the image as defined by its BORDER attribute.
- hspace - The horizontal padding of the image, as specified by the HSPACE attribute.
- vspace - The vertical padding of the image, as specified by the VSPACE attribute.
- alt - The text specified by the ALT attribute.
Methods
- click() - Simulates a user click on the button.
Event Handlers
- onload - Takes effect when the image finishes loading
- onabort - Takes effect when the user aborts the loading of the image
- onerror - Takes effect when an error occurs during the loading or rendering of the image (such that a "broken image" graphic would be substituted)
- onclick - Takes effect when the image is clicked (before the form submits)
- onmouseover - Takes effect when the mouse is moved over the image
- onmouseout - Takes effect when the mouse is moved out of the image
Misc Notes
I've never used an image as an input element, and cannot think of a reason someone might do so. They are more difficult to code than client-side image maps (which are a pain to do, but easier than this) and are not accessible to the disabled. I'm sure someone has found them to be invaluable for some specific purpose ... but I can't imagine what it might be.