Image Input

Image Input

• HTML Forms give you a new way to use images to send information.

• Specifically, you can use the INPUT tag to send information about where (or if) a user has clicked on an image.

• Like all INPUT tags, the IMAGE takes a NAME and a TYPE attribute. The TYPE attribute should be "IMAGE".

• The NAME attribute however should be set to some value that relates to the image being clicked. This NAME will be used to specify which image was pressed and will be sent with the coordinates of the mouse click as name/value pairs in the HTTP message body. Specifically, the browser will add something like the following to the HTTP body if you click on an input image.

  imagename.x=somnumber&imagename.y=somenumber
  

• Of course, the basic tag also needs a value for the SRC attribute that defines where the image to be displayed is located.

• Take a look at the following example:

• The code to get the following input image is listed below:

  <FORM>
     <INPUT TYPE 	= "IMAGE"
     	  NAME 	= "afraid_icon" 
            SRC 	= "Images/afraid_icon.gif"
  	  >
  </FORM>
  

• From above, if we clicked on this image at the point (10,20), the browser would add the following to the HTTP body:

  afraid_icon.x=10&afraid_icon.y=20
  

Image Alignment and Style.

• As with most images in HTML, you can easily align the image with the ALIGN attribute that takes values of TOP, MIDDLE, or BOTTOM.

• Similarly you can take away the blue highlight box around the image by specifying BORDER = "0".

• Consider the following example:
  Here is some text. Where will it be placed?

  Here is some text. Where will it be placed?

• The code for those two input buttons is shown below:

  <FORM ACTION = "POST"> <Here is some text.
  Where will it be placed?
  <INPUT 	TYPE 	= "IMAGE"
  	NAME 	= "afraid_icon" 
         	SRC 	= "Images/afraid_icon.gif"
  	BORDER 	= "0"
          ALIGN 	= "TOP"
  	>
  
  <P>
  
  Here is some text. Where will it be placed?
  <INPUT 	TYPE 	= "IMAGE"
  	NAME 	= "afraid_icon" 
         	SRC 	= "Images/afraid_icon.gif"
  	BORDER 	= "3"
          ALIGN 	= "BOTTOM"
  	>
  </FORM>
  

Hidden Widgets
Table of Contents
File Upload Widget