IMG tag


You can put an image inside your page by means of the <IMG> tag. This is its syntax:

<IMG SRC="something" ALIGN=SOMETHING ALT="something" BORDER="number" VSPACE="number" HSPACE="number" WIDTH="number" HEIGHT="number" ISMAP>

  1. SRC contains your image's name.
  2. ALIGN may be: TOP, MIDDLE, BOTTOM, TEXTTOP, ABSMIDDLE, ABSBOTTOM, LEFT, RIGHT
  3. ALT contains an alternative text
  4. BORDER defines the image's border thickness
  5. VSPACE defines the imaginary window space (vertical space)
  6. HSPACE defines the imaginary window space (horizontal space)
  7. WIDTH defines the image's width
  8. HEIGHT defines the image's height
  9. ISMAP defines a 'clickable' map

Defining the image

If you want to put an image inside of your page, first of all you have to say to the web browser the name of that image and where it's located. You can do that by means of the SRC parameter:

And this is the HTML page's source:

<html>
<head>
</head>
<body>
<IMG SRC="home.gif">
</body>
</html>

Warning: the web browser don't know where that image is located, so you have to define the path. So, in the previous example, the <IMG> tag could be:

<IMG SRC="http://www.name_of_site/dir1/subdir2/name_of_image">

Image's Alignment

This is an image aligned: TOP

And this is the HTML page's source:

<html>
<head>
</head>
<body>
This is an image aligned: TOP <IMG SRC="home.gif" ALIGN=TOP>
</body>
</html>

This is an image aligned: MIDDLE

And this is the HTML page's source:

<html>
<head>
</head>
<body>
This is an image aligned: MIDDLE <IMG SRC="home.gif" ALIGN=MIDDLE>
</body>
</html>

This is an image aligned: BOTTOM

And this is the HTML page's source:

<html>
<head>
</head>
<body>
This is an image aligned: BOTTOM <IMG SRC="home.gif" ALIGN=BOTTOM>
</body>
</html>

This is an image aligned: TEXTTOP

And this is the HTML page's source:

<html>
<head>
</head>
<body>
This is an image aligned: TEXTTOP <IMG SRC="home.gif" ALIGN=TEXTTOP>
</body>
</html>

This is an image aligned: ABSMIDDLE

And this is the HTML page's source:

<html>
<head>
</head>
<body>
This is an image aligned: ABSMIDDLE <IMG SRC="home.gif" ALIGN=ABSMIDDLE>
</body>
</html>

This is an image aligned: ABSBOTTOM

And this is the HTML page's source:

<html>
<head>
</head>
<body>
This is an image aligned: ABSBOTTOM <IMG SRC="home.gif" ALIGN=ABSBOTTOM>
</body>
</html>

This is an image aligned: LEFT

And this is the HTML page's source:

<html>
<head>
</head>
<body>
This is an image aligned: LEFT<IMG SRC="home.gif" ALIGN=LEFT>
</body>
</html>

This is an image aligned: RIGHT

And this is the HTML page's source:

<html>
<head>
</head>
<body>
This is an image aligned: LEFT<IMG SRC="home.gif" ALIGN=RIGHT>
</body>
</html>

Alternative text

You can put an alternative text. It will be shown by the web browser by positioning the mouse's pointer over the image. You can do that by means of the <ALT> parameter:

<IMG SRC="home.gif" ALT="alternative text">

For example, place the mouse over this image:

This is an alternative text!

And this is the HTML page's source:

<html>
<head>
</head>
<body>
<IMG SRC="home.gif" ALT="This is an alternative text!">
</body>
</html>

Image's border

You can insert a border around the image by means of BORDER parameter. A zero value means without border. Example:

And this is the HTML page's source:

<html>
<head>
</head>
<body>
<IMG SRC="home.gif" BORDER="2">
</body>
</html>

Image's window space

You can define the imaginary 'window' where your image will be placed, by means of VSPACE and HSPACE parameters. Look at this example:

This is a simple text line, it isn't really important, but I have to write it to show you the

'imaginary' window definedby VSPACE and HSPACE parameter. In fact, as you can see, this image is placed in the middle of these lines...

And this is the HTML page's source:

<html>
<head>
</head>
<body>
<IMG SRC="home.gif" VSPACE="100" HSPACE="50">
</body>
</html>

Image dimensions

You can specify the image dimension by means of WIDTH and HEIGHT parameters:

And this is the HTML page's source:

<html>
<head>
</head>
<body>
<IMG SRC="home.gif" WIDTH="100" HEIGHT="60">
</body>
</html>

Notice that original dimension of that image was: width 32 and height 32...

'Clickable' maps

You can build a 'clickable' map that's an image which is mouse sensitive. For example, you could build a geographic map of your country, and you could place a different link to each region. Or you could build a clickable menu. Well, when you place the mouse's pointer over the image, the pointer's icon will change: it will become a 'little hand'...That's means you can click on that image and go to specified URL. However, you could specify a little portion of image, so you could decide where you want to make your image 'clickable'. In order to build a clickable image, you have to use the ISMAP option:

<IMG SRC="name" ISMAP USEMAP="#name_of_map">

As you can see there is another option: USEMAP. By means of this option, you can specify the name of a MAPFILE. A MAPFILE is a simple text file which contains the SHAPE of clickable area, and its coordinates. You can define a MAPFILE so:

<MAP NAME="name_of_map">
<AREA SHAPE="rect" COORDS="n,n n,n" HREF="url">
</MAP>

Where:

  1. SHAPE defines the area's shape of map. It may be: DEFAULT or DEF (The URL specified here will be passed to the browser if the image is clicked on but not on an area we specified), RECTANGLE or RECT (A rectangle is defined by the upper-left and lower-right points), CIRCLE or CIRC (A circle is defined as the center point and any point on the circle), POLYGON or POLY (A polygon is defined as the points or vertices. The maximum number of vertices is 100, that is a 100 sided polygon).
  2. COORDS are coordinates of shape (I means columns and rows; for example, when shape is 'rectangle: '1,1 200,50' means upper-left column 1 and upper-left row 1, lower-right column 200 and lower-right row 50).
  3. HREF is the URL of document you want to link to.

Ok, now I'm going to explain you HOW to build a clickable image:

Well, first of all, I have to say you that there are 2 way to build a clickable image: a server-side method and a client-side method. The first method require a CGI script to work, and so, I'm going to talk about the second one...

Step 1: defining coordinates

First of all you have to put an mage inside your HTML page, then you have to decide the shape of the clickable image and finally, you have to find out its coordinates. So, just build a very simple HTML page and put this line into:

<A HREF=""><IMG SRC="url_of_image" ISMAP></A>

Now, if you open this page with a web browser, you will see a 'little hand' and you will be able to see coordinates 'running' into the status bar of your browser. Well, get a piece of paper and write down these numbers. For example: if you decided to create a RECTANGLE clickable area, you have to get the upper-left and lower-right coordinates; therefore, point your mouse on the upper-left corner of your rectangle and write down numbers that you are seeing; then go to the lower-right corner and write down numbers. Well, you have coordinates now!

Step 2: defining map

Ok, throw away the previous HTML page (you have built it to get coordinates!) and build your real HTML page. So:

<html>
<head>
</head>
<body>
<IMG SRC="image.gif" ISMAP usemap="#map" >
<map name="map">
<area shape="rect" coords="1,1,200,70" href="http:/www.....">
</map>
</body>
</html>

Where 'image.gif' is any image you prefer. Ok, that's all!

However you could build clickable images by means of some programs. For example you could use MAPEDIT. Look at this wonderful Yahoo! page...


Index           Home  Back  Forward       About  Contact us!

Copyright (c) 1998-2006 Wowarea