Using the input Element to Create Image Buttons and Maps
Description
The image type of input element creates buttons that display an image and submit the form when clicked.
This type of input element supports the additional attributes shown in the follows.
- alt - Provides a text description of the element.
- formaction - As for the button element
- formenctype - As for the button element
- formmethod - As for the button element
- formtarget - As for the button element
- formnovalidate - As for the button element
- height - Specifies the height of the image in pixels.
- src - Specifies the URL for the image that should be displayed.
- width - Specifies the width of the image in pixels.
Example
The following code shows the image type of the input element in use.
<!DOCTYPE HTML>
<html>
<body>
<form method="post" action="http://example.com/form">
<p>
<label for="name"> Name: <input value="XML" id="name"
name="name" />
</label>
</p><!--from w w w.j av a 2s.c om-->
<input type="image" src="accept.png" name="submit" />
</form>
</body>
</html>
Note
When the user clicks the image, the browser submits the form and includes two data items representing the x and y coordinates where the user clicked, relative to the top-left corner of the image.
The coordinates are provided to representing different regions on the image.