HTML The Definitive Guide (76 page)

NOHREF SHAPE

NOTAB

STYLE

ONBLUR TABINDEX

ONCLICK TABORDER

ONDBLCLICK TARGET

ONFOCUS TITLE

ONKEYDOWN

End tag:

None

Contains:

Nothing

Used in:

map_content

The region defined by an tag acts just like any other hyperlink: when the user moves the mouse pointer over the region of the image, the pointer icon will change and the browser may display the URL of the related
hyperlink in the status box at the bottom of the browser window.[8] Regions of the client-side image map not

defined in at least one tag are not mouse-sensitive.

[8] That is, unless you activate a JavaScript event handler that writes the contents of the status box.

See the onMouse event handlers in section
Section 7.5.4.6, "The event attributes"
.

7.5.4.1 The alt attribute

Like its cousin for the tag, the alt attribute for the tag lets you attach a text label to the image, except that in this case the label is associated with a particular area of the image. The popular browsers display this label to the user when the mouse passes over the area, and it may also be used by a nongraphical browser to present the client-side image map as a list of links identified by the alt labels.

7.5.4.2 The coords attribute

The required coords attribute of the tag defines coordinates of a mouse-sensitive region in a client-side image map. The number of coordinates and their meaning depend upon the region's shape as determined by the shape attribute, discussed later in this chapter. You may define hyperlink regions as rectangles, circles, and polygons within a client-side image map. The appropriate values for each shape are: circle or circ coords="
x
,
y
,
r
", where
x
and
y
define the position of the center of the circle (0,0 is the upper-left corner of the image) and r is its radius in pixels.

polygon or poly

coords="
x1
,
y1
,
x2
,
y2
,
x3
,
y3
,...", where each pair of x,y coordinates define a vertex of the polygon, with 0,0 being the upper-left corner of the image. At least three pairs of coordinates are required to define a triangle, higher order polygons require a larger number of vertices. The polygon is automatically closed, so it is not necessary to repeat the first coordinate at the end of the list to close the region.

rectangle or rect

coords="
x1
,
y1
,
x2
,
y2
", where the first coordinate pair is one corner of the rectangle and the other pair is the corner diagonally opposite, with "0,0" being the upper-left corner of the image. Note that a rectangle is just a shortened way of specifying a polygon with four vertices.

For example, the following fragment defines a single mouse-sensitive region in the lower-right quarter of a 100 ×

100 image and another circular region smack in the middle:

If the coordinates in one tag overlap with another region, the first tag takes precedence. The browsers ignore coordinates that extend beyond the boundaries of the image.

7.5.4.3 The href attribute

Like the href attribute for the anchor () tag, the href attribute for the tag defines the URL of the desired link if its region in the associated image map is clicked. The value of the href attribute is any valid URL, relative or absolute, including JavaScript code.

For example, the browser will load and display the
link4.html
document if the user clicks in the lower-left quarter of a 100 × 100-pixel image, as defined by the first image map tag in the following example:

The second tag in the example uses a JavaScript URL, which, when the user clicks in the upper-left quadrant of the image map, executes a JavaScript alert method that displays the silly message in a dialog box.

7.5.4.4 The nohref attribute

The nohref attribute for the tag lets you define a mouse-sensitive region in a client-side image map for which no action is taken even though the user may select it. You must include either an href or a nohref attribute for each tag.

7.5.4.5 The notab, taborder, and tabindex attributes
As an alternative to the mouse, a user may choose an HTML document "hotspot", such as a hyperlink embedded in an image map, by pressing their Tab key. Once chosen, the user activates the hyperlink by pressing the Return or Enter key. By default, the browsers steps to each hotspot in the order by which they appear in the document.

Originally introduced by Internet Explorer with the taborder attribute, and now standardized as the tabindex attribute, you may change that default order. The value of the attribute is an integer indicating the position of this area in the overall tab sequence for the document.

Supported by Internet Explorer only and not part of the HTML 4.0 standards, notab areas get passed over as the user presses the Tab key to move the cursor around the document. Otherwise, this area will be part of the tabbing sequence. The attribute is useful, of course, in combination with the nohref attribute.

The tabindex attribute is not yet supported by any browser, and the notab and taborder attributes are supported by Internet Explorer only.

7.5.4.6 The event attributes

The same mouse-related JavaScript event handlers that work for the anchor () tag also work with client-side image map hyperlinks. The value of the event handler is - enclosed in quotation marks - one or a sequence of semicolon-separated JavaScript expressions, methods, and function references that the browser executes when the
event occurs. [JavaScript Event Handlers, 13.3.3]

For example, a popular, albeit simple, use of the onMouseOver event is to print a more descriptive explanation in the browser's status box whenever the user passes the mouse pointer over a region of the image map:

onMouseOver="self.status='A recipe for kumquat soup.';return true"> We should point out that the current versions of the popular browsers automatically display the alt attribute's string value, obstensively accomplishing the same task. So we recommend that you include the alt attribute and value in lieu of hacking JavaScript. And, in context with a text-based hyperlink, we argue that the contents of the tag itself should explain the link. But images can be deceptive, so we urge you to take advantage of both the alt attribute and event handlers to provide text descriptions with your image maps.

7.5.4.7 The shape attribute

According to the HTML standard, use this attribute to define the shape of an image map's mouse-sensitive region: a circle (circ or circle), polygon (poly or polygon), or rectangle (rect or rectangle).

The value of the shape attribute affects how the browser interprets the value of the coords attribute. If you don't include a shape attribute, the value default is assumed. According to the standard, default means that the area covers the entire image. In practice, the browsers default to a rectangular area and expect to find four coords values. And if you don't specify a shape and don't include four coordinates with the tag, the browser ignores the area altogether.

In fact, Netscape is the only browser that even recognizes the shape value default to provide a catch-all area for clicks that fall outside all the other defined hotspots. Since areas are in a "first-come, first-served" order in the

Note that the browsers are lax in their implementation of the shape names. Netscape 4, for example, doesn't recognize "rectangle," but does recognize "rect" for a rectangular shape. For this reason, we recommend that you use the abbreviated names.

7.5.4.8 The target attribute

The target attribute gives you a way to control where the contents of the selected hyperlink in the image map get displayed. Commonly used in conjunction with frames or multiple browser windows, the value of this attribute is the name of the frame or window in which the referenced document should be loaded. If the named frame or window exists, the document is loaded in that frame or window. If not, a new window is created, given the specified name, and the document is loaded in that new window. For more information, including a list of
special target names, see section Section 12.7
in
Chapter 12
.

7.5.4.9 The title attribute

The title attribute lets you specify a title for the document to which the image map's area links. The value of the attribute is any string, enclosed in quotes. The browser might use the title when displaying the link, perhaps flashing the title when the mouse passes over the area. The browser might also use the title attribute when adding this link to a user's hotlist.

The title attribute is especially useful for referencing an otherwise unlabeled resource, such as an image or a non-HTML document. Ideally, the value specified should match the title of the referenced document, but it's not required.

7.5.4.10 The class, dir, id, lang, and style attributes
The class and style attributes allow you to supply display properties and class names to control the appearance of the area, although their value seems limited for this tag. The id attribute allows you to create a name for the area that might referenced by a hyperlink.
[The id attribute, 4.1.1.4]
[Inline Styles: The style

Attribute, 9.1.1]
[Style Classes, 9.2.4]

The lang and dir attributes define the language used for this area and the direction in which text is rendered.

Again, their use is not apparent with this tag.
Section 3.5.1.1 in
Chapter 3
Section 3.5.1.2 in
Chapter 3