Image Buttons

You can define an image as part of a form that can be used to submit the form when the button is selected.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="">
<form action="#">
<input type="image" name="myimg" src="img/paypal1.gif"
alt="Donate Image" />


Here's what the Image Button page looks like in your web browser.

This input field behaves identically with a submit button with two differences. The first difference is that we are displaying an image instead of a button containing text. The second difference is that when the form is submitted by clicking on the image with the mouse the x and y coordinates of where in the image was clicked are passed instead of the value that would have been passed with the submit button. The fields passed in this example will be myimg.x and myimg.y containing the click coordinates. Some browsers would still pass an associated value in the myimg field (if there was one) but browsers are not required to do this. In any case while a value attribute can be added to an image button on a form that value doesn't actually get used anywhere and so there is little point in doing so.

The src attribute is required to identify where the image that is to be displayed can be found. The alt attribute is also needed in order to provide alternate text that some web browsers may use if they are unable to display an image (some browsers may substitute a submit button if the image can't be displayed in which case the alternate text may be used as the value for the button).


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow