Image and Image Map Elements
Without images, the Web would just be another version of Gopher. Web elementLinks give pages po-werful visual appeal and often add significantly to the messages that authors are trying to convey.
Placing an image on a page is as simple as using the XHTML <img /> element. In its most basic form, the <img /> element needs only two attributes to do its job. However, <img /> supports as many as 10 attributes that you can use to modify how the image is presented.
<img />
Type:
Standalone
Function:
Places an inline image into a document (see Figure 3.14).
){kind=link}
Figure 3.14 Photos, logos, and other elementLinks are placed into a document using the <img /> element.
Syntax:
<img src="URL_of_image_file" width="width_in_pixels" height="height_in_pixels" alt="text_description" longdesc="URL_of_long_description" ismap="ismap" usemap="map_name" />
Attributes:
As you can see from the element's syntax, <img /> can take several attributes (each attribute is described in detail in this section):
src—Specifies the URL of the file containing the image. src is a required attribute of the <img /> element.
width and height—Gives the width and height of the image in pixels. Specifying this information in the element means that the browser can allot space for the image and then continue laying out the page while the image file loads.
alt—A text-based description of the image content. Using alt is an important courtesy to users with nonvisual browsers or with image loading turned off. alt is also a required attribute of the <img /> element.
longdesc—Points to a resource that contains a longer description of the image's content.
ismap—Identifies the image as being used as part of a server-side image map.
usemap—Set equal to the name of the client-side image map to be used with the image.
NOTE
The ALIGN, BORDER, HSPACE, and VSPACE attributes of the HTML <IMG> tag do not have equivalents under the Strict XHTML DTD. You should use cascading style sheet instructions with a style attribute to specify these presentation parameters or write your XHTML code using the Transitional or Frameset DTD.
Example:
<img src="/images/logo.gif" width=600 height=120 alt="Welcome to XYZ Corporation" usemap="#main" />
One popular use of images is to set up image maps—clickable images that take users to different URLs, depending on where they click. Image maps are popular page elements on many sites because they provide users with an easy-to-use graphical interface for navigating the site (see Figure 3.15).
){kind=link}
Figure 3.15 Image maps are commonly used as navigation interfaces and are usually accompanied by an equivalent set of hypertext links.
Image maps come in two flavors: server-side and client-side. When a user clicks a server-side image map, the coordinates of the click are sent to the server, where a program processes them to determine which URL the browser should load. To accomplish this, the server must have access to a file containing information about which regions on the image are clickable and with which URLs those regions should be paired.
With client-side image maps, the client (browser) processes the coordinates of the user's click, rather than passing them to the server for processing. This is a more efficient approach because it reduces the computational load on the server and eliminates the opening and closing of additional HTTP connections. For the browser to be able to process a user's click, it must have access to the same information about the clickable regions and their associated URLs as the server does when processing a server-side image map. The method of choice for getting this information to the client is to pass it in an XHTML file—usually the file that contains the document with the image map, although it does not necessarily have to be this way. XHTML 1.0 supports two elements that enable you to store image map data in your documents: <map> and <area />. A discussion of these elements rounds out the coverage in this section.
<map>
Type:
Container
Function:
Contains XHTML elements that define the clickable regions (hot regions) of an image map.
Syntax:
<map id="map_indentifier"> ... hot region definitions go here ... </map>
Attributes:
The required id attribute gives the map information a unique identifier so it can be referenced by the usemap attribute in the <img /> element that places the image map graphic.
Example:
<map id="navigation"> <area shape="rect" coords="23,47,58,68" href="search.html" /> <area shape="circle" coords="120,246,150,246" href="about.html" /> ... </map>
With the image map data defined by the map named navigation, you would reference the map in an <img /> element as follows:
<img src="navigation.gif" usemap="#navigation" />
If the map were stored in a file different from the document's XHTML file, you would reference it this way:
<img src="navigation.gif" usemap="maps.html#navigation" />
TIP
Browser support for image map data in a separate file is not yet uniform. Thus, you might want to put image map data in the files in which you need it until support becomes more consistent.
Related Elements:
The <area /> element is used to define the individual hot regions in the image map. The named map is referenced by the usemap attribute of the <img /> element.
<area />
Type:
Standalone
Function:
Defines a hot region in a client-side image map.
Syntax:
<area shape="rect|circle|poly|default" coords="coordinate_list" href="URL_of_linked_document" target="frame_name" alt="text_alternative" tabindex="tab_order_position" nohref accesskey="key_letter" />
Attributes:
The <area /> element takes several attributes, including
accesskey—Defines a shortcut key combination that the user can press to activate the hot region (see the attribute listing for the <a> element for more details).
alt—Provides a text alternative for the hot region in the event that the image does not load or the user has image loading turned off. alt text is also used by spoken-word browsers for the visually impaired. alt is a required attribute of the <area /> element.
coords—Specifies the coordinates that define the hot region. Coordinates are given as a list of numbers, separated by commas. No coordinates are needed when specifying a default region.
href—Set equal to the URL of the document to associate with the hot region.
nohref—Using the nohref attribute in an <area /> element essentially deactivates the hot region by having it point to nothing.
shape—Specifies the shape of the hot region being defined. Possible values of shape include rect for rectangles (the default value), circle for circles, poly for polygons, and default for any point on the image not part of another hot region.
tabindex—Defines the hot region's position in the tabbing order of the page.
target—Specifies into which frame to load the linked document.
NOTE
Each type of hot region has a specific number of coordinate points that you must specify to completely define the hot region. A rectangular region is defined by the coordinates of the upper-left and lower-right corners. A circular region is defined by the coordinates of the center point and either the coordinates of a point on the circle or the radius of the circle. A polygonal region is defined by the coordinates of the polygon's vertices.
Example:
<map id="main"> <area shape="poly" coords="35,80,168,99,92,145" href="profile.html" /> <area shape="circle" coords="288,306,288,334" href="feedback.html" /> <area shape="default" href="index.html" /> </map>
Related Elements:
<area /> elements are allowable only inside the <map> element.