*** Welcome to piglix ***

Image map


In HTML and XHTML, an image map is a list of coordinates relating to a specific image, created in order to hyperlink areas of the image to different destinations (as opposed to a normal image link, in which the entire area of the image links to a single destination). For example, a map of the world may have each country hyperlinked to further information about that country. The intention of an image map is to provide an easy way of linking various parts of an image without dividing the image into separate image files.

Server-side image maps were first supported in Mosaic (web browser) version 1.1.Server-side image maps enable the web browser to send positional information to the server about where the user clicks within an image. This allows the server to make pixel-by-pixel decisions about what content to return in response (possible methods are to use image mask layers, database queries, or configuration files on the server).

The HTML code for this type of server-side image map requires the <img> tag to be inside an anchor tag <a>...</a> and the <img> must include the ismap attribute.

When the user clicks inside the image the browser will append the X and Y coordinates (relative to the upper-left corner of the image) to the anchor URL as a query string and will access the resulting URL (for example, /imagemapper?3,9).

If the browser does not support ismap then the query string must not be added to the anchor URL and the server should respond appropriately (for example, by returning a text-only navigation page).

Client-side image maps were introduced in HTML 3.2, and do not require any special logic to be executed on the server (they are fully client-side). They also do not require any JavaScript.

A client-side imagemap in HTML consists of two parts:

The <area> elements can be rectangles (shape="rect"), polygons (shape="poly") or circles (shape="circle"). Shape-Values are coordinate-pairs. Every pair has an X and a Y value (from left/top of an image) and is separated with a comma.


...
Wikipedia

...