Images
The Img (image) element identifies an image file, the content of which is to appear at the current location. This is an empty element; there is no end-tag. A Src (source) attribute specifies the name and location of the image file:
...there is a GIF file <IMG SRC="myimage.gif"> here.
The image name alone, as shown above, is sufficient when the image resides in the same directory as the HTML document. The rules for specifying an image file stored in another location are the same as for hypertext links (described later), so need not be covered here. By default, the base of the image is likely to be aligned with the baseline of the text. Image alignment can be made specific using the Align attribute (now deprecated), which takes a value of 'top', 'middle' or 'bottom'. As some browsers are not able to display images, an Alt (alternative) attribute may be used to display alternative text. The second example below demonstrates its use:
...there is a GIF file <IMG SRC="myimage.gif" ALIGN="top" ALT="no Piccy"> here. ...there is a GIF file -------- here. | | -------- ...there is a GIF file [no piccy] here.
This element takes additional alignment options using the Align attribute. In addition to the standard 'middle', 'top' and 'bottom' options, the new 'left' and 'right' options create floating images in the left or right margin. New attributes include Border, which specifies the thickness of the image border line, the Vspace (vertical space) attribute and the Hspace (horizontal space) attribute, which create extra space around the image, and Width and Height, which tell the browser the dimensions of the image to speed up downloading:
<IMG BORDER="2" VSPACE="3" HSPACE="4" ALIGN="left">
Due to the new floating images described above, the Br (line break) element has been extended to allow the break to force the next line to appear below large, horizontally adjacent floating images. Account can be taken of images that appear in just one of the margins. The Clear attribute (now deprecated) takes a value of 'all' (an image in either or both margins), 'left' (an image in the left margin only) or 'right' (an image in the right margin only):
<BR CLEAR="left">
A popular feature of HTML is its ability to attach links to parts of an image. This is called an image map. For example, a map of the world could be linked to other HTML documents that describe characteristics of each country. The source of the link is therefore an area of the image. In the well-supported concept of a 'server-sided' image map, the browser simply passes the coordinates of the mouse-click to the Web server, which calls a script that decides, depending on the coordinate values, which HTML document to return to the browser. The Img element takes an additional attribute, Ismap, to indicate that the coordinates of the mouse-click should be sent to the Web server. This implied attribute has a single legal value of 'ISMAP' (the attribute name never appears):
<IMG SRC="myimage.gif" ISMAP>
However, the Web server must also be told which script to activate when the mouse is clicked on this image. To do this, the Img element is enclosed in an A element, which uses a URL to locate the appropriate script:
<A HREF="/cgi-bin/imagemap/my.map">
<IMG SRC="myimage.gif" ISMAP>
</A>
This scheme relies upon the use of the HTTP protocol, a Web server and CGI scripts, and so it is not particularly suitable for simple intranet solutions or for publishing HTML files on a CD-ROM. The concept of 'client-side' image maps overcomes this problem. The browser uses HTML tags to identify image areas and associated URLs to other documents or other parts of the same document. This approach provides the benefits of less interaction with the server (making the process more efficient) and independence from the HTTP protocol (making it suitable for simple intranet use, when a Web server may not be needed, and more efficient Internet use), as well as giving prior warning of the effect of clicking on any part of the image (the target URL being displayed as the pointer is moved over the image). The Usemap attribute is added to the Img element and holds the name of a Map element that defines areas of the image:
<IMG SRC="/images/myimage.gif" USEMAP="#mymap"> <MAP NAME="mymap"> ..... </MAP>
Within the Map element, each area and associated URL is defined using an Area element. This element contains attributes to define the shape of the area, the coordinates of the area and the URL associated with the area. The Coords attribute defines the coordinates of the area and the Href attribute provides the URL. The Alt attribute contains a textual equivalent to the area, to be used by applications that cannot support this feature. The Nohref attribute indicates that this area is not active, and it has a single possible value of 'nohref'. Consider an example of an image showing a new model of motor car. Each area of interest, such as the wheels or the engine, could be located and attached to an appropriate HTML document:
<MAP NAME="mymap">
<AREA SHAPE="circle"
COORDS="50, 150, 150, 250"
HREF="wheels/back.html"
ALT="Back Wheels">
<AREA SHAPE="circle"
COORDS="350 200 50"
HREF="wheels/front.html"
ALT="Front Wheels">
</MAP>
The default shape is assumed to be a rectangle, with four coordinates representing in pixels the left edge, top edge, right edge and bottom edge of the area. The first example above defines an area for the back wheel – '50' pixels in, '150' pixels down for the left and top edges, and (as the diameter of the wheel is 100 pixels), '150' in and '250' down for the right and bottom edges. The optional Shape attribute may be used to make this area type explicit, 'shape=”rect”'. Another shape option is 'circle', which requires three values, namely the horizontal and vertical coordinates for the centre of the circle, followed by a radius value. The second example defines the area of the front wheel as a circle with a radius of '50' pixels, '350' pixels across and '200' down.
Backward compatibility can be provided for the benefit of browsers not able to use this facility. Both schemes for creating image maps (client-side and server-side) can coexist by including both the Ismap attribute and the Usemap attribute in the same Img element. In the example below, a browser that does not support a client-side map scheme uses the Anchor to pass coordinates to 'myscript.cgi':
<A HREF="myscript.cgi"> <IMG SRC="/images/myimage.gif" USEMAP="#mymap" ISMAP> </A> <MAP NAME="mymap"> <!-- image mapping commands --> </MAP>