Contents

Further reading

Quick Introduction to HTML
Images

Introduction

Images, or pictures, are easy to include in web pages. This document presents the basics of how this is done, and some of the other capabilities of images.

The img tag

Web page images are stored in a separate image file, not in the HTML file. Images files may be included in HTML by the img tag.

The img tag is self-terminating, so it doesn’t take an end tag. A simple example would look like

<img src="sailboat.gif" alt="a drawing of a sailboat" width="128" height="125"/>

The src attribute is a URL indicating the location of the image file, either as a file relative to the present HTML file, or a remote file on a different web server. So the above code is rendered by the web browser as a picture:

a drawing of a sailboat

The alt attribute isn’t strictly required, but it is strongly recommended for any image that contributes to the information in the web page. The text may be simply a description of the image, or a textual replacement of the image. Consider how you want the page to appear in a web browser that doesn’t support images, or if the image is lost somehow. Also, web browsers for the sight-impaired can read aloud the alt text in place of the image.

The width and height attributes aren’t required either. Their function is to let the browser how much space to reserve for a picture before the picture is loaded.

Image formats

There are three common formats for images on the World Wide Web. Any of these formats are very likely to work well in any graphical web browser. Other formats are very likely to fail on platforms other than the one for which they were created.

The file name suffix of an image file should correspond to the image format so the browser will know what format to expect. (While this isn’t strictly necessary on platforms such as the Mac where file types aren’t specified by file name suffixes, you should use the suffix convention anyway. to simplify a possible move to a different platform.)

Another standard image format, SVG, which is used for line drawings and such, we will mention here, but note its nature and use is quite different from the others.

Image Alignment

An image tag placed in the text of a web page will be rendered with the picture in-line with the text. How the picture is aligned to the text (the bottom of the image to the text baseline, etc) is a matter for styles.

The most flexible way to align images in a Web page is to use tables.

To place two images in different table cells next to one another with no gap, you need to set the table’s cellpadding and cellspacing attributes to "0".

Images may also be aligned by using styles. But be warned: to do this by hand is tricky.

Transparency

The GIF and PNG formats allow parts of an image to be transparent. This is particularly important for line drawings and diagrams. Rather than forcing the background of the image to be the same color or pattern as the page background, you can simply set the image background to be transparent. This way, you can set the page background arbitrarily without having to alter the image.

The PNG format permits different parts of an image to have different degrees of transparency.

Animation

The easiest and most portable way to include a short animation in a web page is to use the animation feature of the GIF image format. An image editing program is needed to create an animated GIF. With the image editor, you can set the frame rate, and whether the animation is to play just once or repeatedly.

To put the animation in your page, include the image file using the img tag as you do with any other image.

Please use some discretion using animations in web pages. For many people, flashy animations are just annoying.

There are limitations to GIF animations. Such an animation should contain only a few frames, otherwise, it will be large and take a long time to load. Also, there is no effective way to synchronize a sound track with GIF animations.

Longer animations, or movies with a sound track, or animations with user interactions, are best handled using various plugin technologies such as MPEG, Quicktime, and Flash. See Plugins.

Another approach to animation, especially animation that is affected by user interaction, uses web page scripting. See Dynamic HTML.

Bear in mind that none of these technologies is part of the HTML standard, and that the farther you stray from HTML, the more users you will exclude from viewing your page properly.

Image buttons

A web page form can contain buttons which are displayed as images from an image file. This is done with the input tag and its src attribute.

Image maps

An image map is an image with a set of regions defined to take certain actions when the user clicks on them.

In the simplest kind of image map a “client-side” image map, these actions are simply to follow a link, just like any other link in a web page. In a “server-side” image map, the coordinates of the clicked region are passed to the server, which can respond in a very flexible way. It is also possible to script an image map, so that a script in the web page reacts to mouse clicks.

Client-side image maps are preferred over other image map techniques, because they require the least of the user’s browser and of the web server, and are therefore much more robust than the other techniques.

To make an image map requires three HTML tags: the img tag which we’ve already discussed, a map tag, which contains area tags. The map tag associates the area tags with the image; the area tags describe the clickable regions of the map, and the actions to be taken when they are clicked.

The usemap attribute of the img tag associates the image with the map with matching id (or name) attribute. Note some browsers use id some use name. The standard now says to use id, but it is safest to use both.

The map tag can contain any number of area tags.

Each area tag must have a shape attribute and a coords attribute. The value of the shape attribute must be one of "default", "rect", "circle", and "poly". The value "default" indicates the whole image. The "rect", "circle", and "poly" values indicate a rectangular, circular, or polygonal region, respectively, defined by the coords attribute.

The coords attribute value represents pixel coordinates, separated by commas, whose format and interpretation depends on the shape attribute. The coordinates are with respect to the top-left corner of the image.

For areas of shape "rect", the coords attribute value consists of four integer numbers representing the left, top, right, and bottom of the rectangle.

For areas of shape "circle", the coords attribute value consists of three integer numbers representing the center x and y, and the radius, of the circle.

For areas of shape "poly", the coords attribute value consists of any number of x, y value pairs, representing the vertices of a closed polygon. (If the first and last pairs are not the same, a pair of values equal to the first pair is appended to close the polygon.)

The href attribute specifies the URL of the page to which the browser goes when the user clicks the area. Compare this with the href attribute of the a tag.

For example: the code

<img src="imagemap/map.gif" usemap="#mymap" width="128" height="128"
   alt="My image map" />
<map name="mymap" id="mymap">
   <area shape="rect" coords="4,4,32,32"
	href="imagemap/rect.html"
	title="click on the rectangle!"
	alt="The rectangle area"/>
   <area shape="circle" coords="66,53,22"
	href="imagemap/circle.html"
	title="click on the circle!"
	alt="The circle area" />
   <area shape="poly"
	coords="11,69,39,86,91,86,110,16,109,113,61,101,15,111,11,69"
	href="imagemap/poly.html"
	title="click on the polygon!"
	alt="The polygon area" />
   <area shape="default"
	href="imagemap/default.html"
   title="try clicking on the shapes!"
	alt="The map background" />
</map> 

is rendered by your browser like this (click on it!):

my image map the rectangle area the circle area the polygon area the map background

The alt attribute value is an alternative textual version of the map area. If for any reason, the map image cannot be displayed, this text can be employed by the browser to produce a usable version of the map. For instance, a text-only browser might replace the map with a list of the alt values of the map area, from which the user can then choose.

The title attribute value is a textual advisory of the function of the area. Many browsers use this text to produce a “tooltip”, a little text box that appears when the mouse hovers over the area.

Note that the order in which the area elements are listed in the map element makes a difference: if two areas overlap, the first one listed gets the mouse click. Therefore, an area of shape "default" should come last in the map element, or else that area will get the mouse clicks of any area that comes after it in the map element.

Other uses of image maps: Server-side, scripted.

Imagemaps and the keyboard: accesskey, tabindex

Server-side image maps: ismap attribute of img tag

Some browsers (Netscape) put a border around the image map to indicate that it is a kind of link. You can use styles to get rid of this border, if you like.

Special software is available to facilitate creating image maps and their tags.

Note: there is an issue with XHTML version 1.1 and the map element. Previous standards have used the name attribute to identify the map tag, but XHTML states that the id attribute be used instead. But many browsers will not use the id attribute properly. It is a conflict between compatibility and consistency; the solution chosen by the standards committee was sub-optimal.