contents introduction reference index
previous next
HTML 4 - User's Guide
The MAP element
Contents:
- 1. SAMPLES
- 1.1 A MAP for the moolight landscape
1.2 MAP with A elements
- 2. USAGE
- 2.1 Placement
2.2 Varieties
- 3. SYNTAX
- 3.1 Structure
3.2 MAP element attributes
3.3 AREA or A element attributes
- 3.3.1 AREA and A basic attributes
3.3.2 Other attributes
A map as defined by the MAP element is a rectangular frame containing a number of geometric figures that can be mapped onto an image. The figures in the map are associated with <a href... > elements that link to other documents. When the frame is mapped onto the image, figures in it will map onto features of the image. When one of these features is clicked on, the link associated with its mapping figure is activated and the document it links to comes up.
An image with an associated map that causes it to respond to a mouse click is called a sensitive or clickable image.
| The image | The MAP |
|
| 
| To the left is an image. To the right is a map frame with geometric figures that will approximately map onto features of the image.
The circle would map onto the moon. The rectangle onto the house.
The irregular polygon at bottom left onto the blue area that represents a lake.
|
The mapping can be visualised as on the figure to the right. But really the geometric figures don't show, as you can see by running the examples.
The geometric figures are defined by its pixel coordinates in the map frame.
The origin of the coordinates is at the upper left corner. The x-coordinates axis is the horizontal line pointing to the right.The y-coordinates axis is the vertical line pointing downward.
In order for the geometric figures to precisely map onto the desired image features, the pixels coordinates of the latter have to be precisely evaluated. This can be performed using a print out of the image. The pixel coordinates of each point in the image can be derived from the measurements on the printed output as the product of these by the ratio of the pixels dimensions of the internal image to the dimensions of the print out.
The geometric figures in the map are also called regions
|
The samples in the following show how to define the regions in the map, and how a link to a document can be attached to each region.
1. SAMPLES
1.1 A map for the moon light landscape
The map can be defined by the following code:
<MAP name="moonscape">
<AREA shape="circle" coords="136,61,31" href="TheMoon.html">
<AREA shape="rectangle" coords="222,106,254,126" href="TheHouse.html">
<AREA shape="polygon" coords="57,235,156,235,156,268,38,268,11,262,57,239"
href="ILLChillon.html">
</MAP>
The shape attribute defines the shape of a region (key-words: "circle", "rectangle", "polygon"), and the coords attribute define its coordinates. The href attribute defines the link associated with the figure.
This map has to be associated with the image, which is achieved using the usemap attribute in the element that defines the image, which is preferrably the <OBJECT> element; but you have to use the <IMG> element if your browser does not support the former.
This is the code using an OBJECT element to define the above image:
<OBJECT data="../Images/MapOver-1.bmp" type="image/bmp"
usemap="#moonscape"
>
<b><font color="red">Moon light landscape</font></b>
</OBJECT>
This is the code using an IMG element:
<IMG src="../Images/MAPOver-1.bmp" alt="Moon light landscape"
usemap="#moonscape">
To see the result please:
1.2 A map with <A> elements
Instead of the <AREA> elements as used in the foregoing example, a map can be defined with <A> elements like this:
<MAP name="moonscape">
<P>
<A shape="circle" coords="136,61,31" href="TheMoon.html">
<A shape="rectangle" coords="222,106,254,126" href="TheHouse.html">
<A shape="polygon" coords="57,235,156,235,156,268,38,268,11,262,57,239"
href="ILLChillon.html">
</P>
</MAP>
This example is derived from the foregoing by just replacing "AREA" with "A". It will work with the same image as above (that is, if it is supported).
This form of the map is relatively new and supported only by the newer browsers. Browsers which do not support the <OBJECT> element most likely would not support this form of map.
It is important that the <A> elements be put in a block (otherwise the MAP element will be ineffectual). In the example, this is achieved by the <P> markup that follows the <MAP> tag; the </P> which is optional is added here for clarity.
To see the result please:
| - | click here if your browser supports the OBJECT element
|
| - | click here if it does not
|
| if the image is not sensitive, the reason probably is that your browser doesn't support this form of the map.
|
Unlike the links defined in the <AREA> elements, those defined in the <A> elements show up here (above the image).
2. USAGE
A MAP element defines a map that can be referenced from
| - | an OBJECT element that defines an image (not from a OBJECT element that defines another sort of object)
|
| - | an IMG element
|
2.1 Placement
When used with an OBJECT element, the MAP element can stand:
| - | in the content of the latter
|
| <OBJECT type="image" data=...<>
<MAP ...> ... </MAP>
| </OBJECT>
| |
|
| - | apart from the OBJECT element
|
| <MAP ...> ... </MAP>
| ...
| <OBJECT type="image" data=...>
...
| </OBJECT>
| |
As an IMG element cannot have a content, a MAP element obviously must by outside of it. The IMG element does not support a MAP defined with <A> elements.
When a MAP element with figures defined by the <A> elements, is outside the OBJECT or the IMG element, the link it defines show on the HTML page.
2.2 Varieties
A MAP element content defines a number of sensitive regions using:
| - | either a set of <AREA> elements
| | - | or a set of <A> elements ; the A elements must be contained in a block (such as defined by a P element)
|
The form using an A element is the newer. Older browsers may not support it.
3. SYNTAX
3.1 Structure
A MAP element has either form:
<AREA> elements content
<MAP name=...>
<AREA ...>
...
</MAP>
or
<A> elements content
<MAP name=...>
<P>
<A ...>
...
</MAP>
3.2 MAP element attributes
The only attribute of the MAP element is:
| name | which defines the name of the MAP object; this name is referenced from an OBJECT or an IMG element
|
3.3 <AREA> or <A> element attributes
3.3.1 AREA and A basic attributes
The attributes that are most usually to be found in an <AREA> or a region-defining <A> element are:
- shape
- coords
- href
- alt
| shape | specifies the region shape - the values of the attribute can be:
| |
| circle | the region is to be a circle - example: shape="circle"
| | rectagle | the region is to be a rectangle with sides parallel to the coordinates axes - example: shape="rectangle"
| | polygon | the region is to be a polygon - example: shape="polygon"
|
| | The default value of shape is "rectangle"
| | coords | specifies the pixels coordinates of the region; according as the region is a circle, a rectangle or a polygon, the values of the coords attribute region as follows:
| |
| circle | x, y, r - where:
| | x is the x coordinate of the center
| | y is the y coordinate of the center
| | r is the radius size (in pixels)
| | Example: coord="100,200,30"
defines a circle centered at (x=100,y=200) with a 30 pixels radius
| | rectagle | sx, sy, ix, iy - where
| | sx is the x coordinate of the upper left corner
| | sy is the y coordinate of the upper left corner
| | sx is the x coordinate of the lower right corner
| | sy is the y coordinate of the lower right corner
| | Example: coord="100,200,300,400"
defines a rectangle with the upper left corner at (x=100,y=200) and the lower right corner at (x=300,y=400)
| | polygon | vx, vy, ...
| | the value of the coords attribute is a list of comma separated coordinates of the vertices of the polygon in the order they are encountered in a clockwise or counter-clockwise walk along the polygon periphery.
| | vx is the x-coordinate of a vertex
| | vy is the y-coordinate of a vertex
| | Example: coords="10,100,20,110,50,90,40,80,30,70"
defines a polygon with vertices at (x=10,y=100), (x=20,y=110),(x=50,y=90), (x=40,y=80), (x=30,y=70)
|
| | href | defines the link to a document or part of a documents by its URI and the name of the location if desired; when a location name is used, it is preceded by the "#" sign.
| | Example:
| | href="http://www.hatayservices.com/Tutorials/XML/cover.html"
| | defines the "cover.html" document in the "Tutorial/XML" path from the Network root directory of site "www.hatayservices.com" as the target document of the link
| | href="http://www.hatayservices.com/Tutorial/XML/cover.html#prolog"
| | defines location "prolog" within the "cover.html" document in the "Tutorial/XML" path from the Network root directory of site "www.hatayservices.com" as the target location of the link
| | alt | defines the text to be displayed if the browser cannot render the document identified by the href attribute.
| | Example: alt="XML cover"
| | The message "XML cover" will be displayed at the location of the <A> or <AREA;> element, if for some the browser did not try to access the target document.
|
3.3.2 Other attributes
The AREA and A elements have the elements common to almost all elements. Please click here
The other attributes are:
- nohref
- tabindex
- accesskey
- onfocus
- onblur
These attributes, except the first one, are described with other elements. They specify further properties of the region defined by the <A> or <AREA> element.
| nohref | when present, without a value, indicates that the region has no link associated with it
| | tabindex | numeric value - specifies the tabbing order of the region in the document - click here for more...
| | accesskey | specifies a one character key which, when typed by the user, has the same effect as clicking on the link - click here for more...
| | onfocus | specifies the script to be executed when the region gets focus, either by pointing the mouse cursor on it, or by getting on it with a tab action -- the value of the attribute can be a script function name, or the text of a script - click here for more...
| | onblur | specifies the script to be executed when the region loses focus, by moving away from it, either with the mouse, or by a tab action -- the value of the attribute can be a script function name, or the text of a script - click here for more...
|
contents introduction reference index
previous next
| | |