Images and image zones
Documents that consist entirely of text tend to be quite dull. Images add interest, and in some cases are truly 'worth a thousand words'.
Image references
The Image (Img) element identifies an image file, the content of which is to appear at the current location. This is an empty element. The Source (Src) attribute specifies the name and location of the image file using a URL reference (see Chapter 30):
...there is a GIF file <img src="myimage.gif" /> here.
This element takes additional attributes to specify the Width and Height of the image. By telling the browser the dimensions of the image, it can speed up presentation of the document because the rest of the page can be built before the image is downloaded:
<img ... width="5in" height="3in" />
Alternative text
Since some browsers are not able to display images, or can be configured for the visually impaired, an Alternative (Alt) attribute may be used to display alternative text. The second example below demonstrates its use:
...there is a GIF file <img src="myimage.gif" alt="no picture" /> here. -------- | | ...there is a GIF file -------- here. ...there is a GIF file [no picture] here.
Long description
The Longdesc attribute contains a URL link to a description (probably an XHTML page) of the image (and is usually longer than the content of an Alternative attribute). When the image has a server-sided image map, this description may explain what each of the regions are, and where they are in the image.
CGI image maps
It is possible 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 XHTML documents that describe characteristics of each country. The source of the link is therefore defined as a specified area within 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 XHTML document to return to the browser. The Image element takes an additional attribute, Ismap, to indicate this requirement to the browser. This implied attribute has a single legal value of 'ismap':
<img src="myimage.gif" ismap="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 Image element is enclosed in an Anchor element which uses a URL to locate the appropriate script:
<a href="/cgi-bin/imagemap/my.map">
<img src="myimage.gif" ismap="ismap" />
</a>
This scheme relies upon the use of the HTTP protocol, a Web server and CGI scripts. It is not particularly suitable for simple intranet solutions or for publishing XHTML files on a CD-ROM.
Client-sided image maps
The concept of 'client-side' image maps overcomes the limitations of server-side image maps outlined above. The browser uses XHTML tags to identify image areas and associated URLs to other documents or to another part 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), as well as giving prior warning of the effect of clicking on any part of the image (the target URL may be displayed as the pointer is moved over the image). The Usemap attribute is added to the Image element and holds the identifier of a Map element that defines areas within the image:
<img src="/images/myimage.gif" usemap="#mymap" /> <map name="mymap"> ..... </map>
The Map element has the usual core attributes, but the Id attribute is required instead of optional. It is not clear why this decision was made, because it is the Name attribute that holds the target value (for backward compatibility with HTML).
Within the Map element, each area is defined using an Area element. This element contains attributes to define the shape and coordinates of the area, and the URL associated with the area. The Coordinates (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 XHTML document:
<map name="mymap">
<area coords="150 200 150 250"
href="wheels/back.xhtml"
alt="Back Wheels" />
<area shape="circle"
coords="350 200 50"
href="wheels/front.xhtml"
alt="Front Wheels" />
</map>
The default shape is 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; the horizontal and vertical coordinates for the centre of the circle, followed by the radius. 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.
Using both mapping features
Backward compatibility can be provided for the benefit of browsers unable to use client-sided image maps. Both schemes for creating image maps 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>