Tutorial 12: Embed with HTML - Page 7 - HTML with Style

Tutorial 12: Embed with HTML - Page 7

The image is enclosed in an A element that gives a URI, and is given the boolean ISMAP attribute. When you click on a certain point in the image, the string ?x,y, where x is the horizontal co-ordinate of the mouse click and y is the vertical co-ordinate of the mouse click, is appended to the URI and the resulting URI is loaded. The handling of the URI from then on depends on the Web server that recieves the request. If you want to set up your Web server to handle these, you'll have to check its documentation, as different servers handle images in different ways. In Webreference.com's case, depending on where you clicked, an appropriate page is loaded.

Server-side image maps are bad for several reasons. First of all, they are useless for browsers that can't display images. Usually, the URI given in the A element has some default action if no co-ordinates are given, so there might be some functionality there, but most of the time there isn't much you can do.

Also, server-side image maps give the user no clue as to what location each point in the image points to. Unless the user clicks on the image, he can't be sure where he'll end up. Server-side image maps also usually mean that you get two separate network connections when you click on an image that is used like the one above. One to the image map handler, and one to the page it will refer you to. Finally, server-side image maps mean you have to keep track of an extra factor when publishing Web pages, as you have to keep the image map handlers on your server up to date. All of these problems are solved with client-side image maps.

Client-Side Image Maps

Client-side image maps are specified in the HTML document itself, and hence do not require any changes to your Web server. To specify a client-side image map, you use the MAP element.

The MAP element

Context:

The MAP element is a block-level element.

Contents:

May contain any number of AREA elements. It may also contain block-level content (see text for details)

Tags:

Both the start-tag and end-tag are required.

Attributes for the MAP element

name (ID)

Specifies the name of the image map, to be used in the USEMAP attribute when referring to the image map.

Identifier and classification attributes

Title attribute

Language information attributes

Inline style information attribute

Intrinsic event handler attributes

The AREA element

Context:

May only appear inside MAP elements.

Contents:

AREA is an empty element.

Tags:

Empty element. The start tag is required, and the end-tag is forbidden

Attributes for the AREA element

shape (shape)

Specifies the shape of the area. Possible values are rect, circle, poly and default.

coords (comma-separated list of numbers)

Specifies the co-ordinates that define the area's shape. The precise interpretation of these depends on the shape.

nohref (boolean)

If present, specifies that the area does not link to any resource. (The area can still be used for such things as scripting, however)

Hyperlink target attributes

Identifier and classification attributes

Title attribute

Language information attributes

Inline style information attribute

Intrinsic event handler attributes

Form control naming attribute

Tabbing navigation attribute

Accessibility key attribute

To create an image map, put a few AREA elements inside a MAP element, and then use the USEMAP attribute to link your image (or object, as the case may be) to the map. Here is an example:

<IMG SRC="example1.gif" USEMAP="#example">
<MAP NAME="example">
<AREA SHAPE="circle" COORDS="50,50,40" HREF="1.html" ALT="Page 1">
<AREA SHAPE="rect" COORDS="110,10,190,90" HREF="2.html" ALT="Page 2">
<AREA SHAPE="poly"
COORDS="231,6,292,22,279,53,293,85,213,90,223,53,210,25" HREF="3.html"
ALT="Page 3">
<AREA SHAPE="default" HREF="./" ALT="Front Page">
</MAP>

Produced by Stephanos Piperoglou

URL: https://www.webreference.com/html/tutorial12/7.html

Created: May 28, 1998
Revised: February 25, 1999