eXtropia: the open web technology company
Technology | Support | Tutorials | Development | About Us | Users | Contact Us
Resources
 ::   Tutorials
 ::   Presentations
Perl & CGI tutorials
 ::   Intro to Perl/CGI and HTML Forms
 ::   Intro to Windows Perl
 ::   Intro to Perl 5
 ::   Intro to Perl
 ::   Intro to Perl Taint mode
 ::   Sherlock Holmes and the Case of the Broken CGI Script
 ::   Writing COM Components in Perl

Java tutorials
 ::   Intro to Java
 ::   Cross Browser Java

Misc technical tutorials
 ::   Intro to The Web Application Development Environment
 ::   Introduction to XML
 ::   Intro to Web Design
 ::   Intro to Web Security
 ::   Databases for Web Developers
 ::   UNIX for Web Developers
 ::   Intro to Adobe Photoshop
 ::   Web Programming 101
 ::   Introduction to Microsoft DNA

Misc non-technical tutorials
 ::   Misc Technopreneurship Docs
 ::   What is a Webmaster?
 ::   What is the open source business model?
 ::   Technical writing
 ::   Small and mid-sized businesses on the Web

Offsite tutorials
 ::   ISAPI Perl Primer
 ::   Serving up web server basics
 ::   Introduction to Java (Parts 1 and 2) in Slovak

 

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:

    <Here is some text.  Where will it be placed?
    <INPUT TYPE = "IMAGE" NAME = "afraid_icon"
           SRC = "afraid_icon.gif" BORDER = "0"
            ALIGN = "TOP">

    <P>

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

introduction to web programming
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 = "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
Previous | Next | Table of Contents