 |
| HyperText Markup Language (HTML) Style Structure See also : |
Having a few images on a website can make it more attractive and user-friendly. However, it is important not to go overboard, since images can take a long time to load, and in some cases can make a document harder to read.
The IMG tag is used for inserting images in HTML pages. The image may be located on the same server as the page which it is inserted into, but it may also be one located on a different server, if the full URL is specified.
Only the following image formats have been accepted into W3C standards:
The main attributes of the IMG tag are:
So to insert an image, this is the sort of tag that should be used:
<IMG SRC="url_of_image"
ALT="Text replacing the image"
TITLE="Text to display">
| Attribute | Value | Result | Visual Effect |
|---|---|---|---|
| ALIGN | bottom center left middle top right |
Image alignment. | |
| ALT | Alternate text shown if the image isn't displayed. | ||
| BORDER | Whole number (integer) | Number of pixels in the image border. The colour of the border may be defined by the LINK or TEXT attribute of the <BODY> tag. By default, the BORDER attribute is set to 1, which creates a small frame around the image. If you don't want that, you can set the value to 0. |  |
| HEIGHT | Whole number (integer) | Image height (in pixels or in %). When this attribute specifies a size different from the original height of the graphic, the browser automatically resizes it, which may reduce the displayed image's quality. | |
| HSPACE | Whole number (integer) | Number of pixels to leave between the image and the adjacent text (horizontally). | Text |
| LONGDESC | URL of the image's description. | ||
| LOWSRC | URL | An alternate image (typically smaller) displayed while the real image is being loaded by the browser. |  |
| NAME | Sets the image's name. This attribute is mainly used for dealing with images in JavaScript. | ||
| SRC | URL | The image's URL. | |
| TITLE | Alternate text shown if the image isn't displayed. | ||
| USEMAP | URL or name of the anchor which defines the mapped image. | ||
| VSPACE | Number of pixels to leave between the image and the adjacent text (vertically). | Test text |
|
| WIDTH | Whole number (integer) | Image width (in pixels or in %). When this attribute specifies a size different from the original width of the graphic, the browser automatically resizes it, which may reduce the displayed image's quality. | |
Images are inserted in text the same way characters are, so it would seem impossible to make text wrap around an image.
However, there are actually several ways to do this. Let's look at two of them:
You can create different clickable areas within an image using the USEMAP attribute in conjunction with the MAP tag.
The USEMAP attribute of the <IMG> tag points to a <MAP> tag containing a description of the clickable areas that the map is divided into.
The <MAP> tag has a NAME attribute to define its name, and also declares which areas are clickable by using the AREA tags.
| Tag | Attribute | Value | Visual Effect |
|---|---|---|---|
| MAP | NAME | ||
| AREA | SHAPE | RECT
CIRCLE
POLY |
Rectangle (its coordinates are: "x-axis start point, y-axis start point, x-axis start point, y-axis start point") Circle (its coordinates are: Polygon (its coordinates are: |
| HREF | URL | Link to URL | |
| COORDS | "XX,XX,XX,XX" | Contains the coordinates of the clickable area, separated by commas. |
Below is an example of an image map:
<IMG SRC="images/image.gif" WIDTH=150 HEIGHT=70 USEMAP="#Map"> <MAP NAME="Map"> <AREA SHAPE="rect" HREF="start.html" COORDS="0,0,48,28"> <AREA SHAPE="circle" HREF="previous.html" COORDS="50,30,10"> <AREA SHAPE="poly" HREF="next.html" COORDS="60,50,80,30,100,40,50,100"> </MAP>
