Tag: <map>

<map> Syntax

Syntax Diagram for <map>
Opening Tag Content Closing
Open Parameter = Value Close
<map name = "name" > <area>

Syntax Diagram for <area>
Open Parameter = Value Close
<area shape = rect >
coords = coords
href = "url"
alt = "text"
target NC = _blank NC
_self NC
name NC

<map> Description

A client-side image map, defined between <map> and </map> tags and used with the ismap and usemap options of the <img> tag, allows a single graphic to hyperlink to multiple destinations, depending on where in that graphic the user clicks. The potential destination is noted in the status line when the mouse is over a hyperlinked area, allowing you to see, before actually clicking, where you'd go if you clicked there. This is a marked improvement over the old-style server-side image maps, which not only required extra server activity and network traffic, but you never knew where you were going until you got there.
shape and coords
Specifies the shape of the hotlinked area, and determines how the coordinate list should be interpreted. The valid shapes and coordinate-list interpretations are as follows:

rect (default)
Rectangle; requires four coordinates: xmin, ymin, xmax, ymax (or left, top, right, bottom).
circ, circle
Circle; requires three coordinates: xcenter, ycenter, radius.
poly, polygon
Polygon; requires 2n coordinates, where n is the number of vertices of the polygon: x1, y1, x2, y2, x3, y3, . . . xn, yn.
Specifies the destination document to which the user goes if he clicks within this area.
Specifies that no action is to be take if the user clicks in the associated area. Technically, this is not needed, because any area not covered by one of the <area> tags is automatically a no-op (no action is taken).
Exactly like that of the <img> tag, the alt text is the text that will be displayed if the browser cannot display the graphic itself.
Specifies the manner in which the next document is to be loaded (Netscape only). The possible values are:

<map> Examples

This map tag specifies a window (or frame) with a white background, black text, blue unvisited links, magenta visited links, and red active links: <map name="MyImageMap"> <area shape=rect coords="50,31,134,82" href="s.html"> <area shape=circle coords="230,133,33" href="center.html"> <area shape=poly href="p.html" coords="41,178, 26,140, 65,110, 78,160, 136,145, 103,190, 41,178"> </map> <img src="ImageMap.gif" ismap usemap="#MyImageMap"> . . .causes the following results:

Last Modified: Thursday, 24-Dec-2009 14:41:36 MST