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

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 tag to be inside an anchor tag ... and the 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

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.

Pure HTML

A client-side imagemap in HTML consists of two parts:
# the actual image, which is embedded with the tag. The image tag must have an attribute ''usemap,'' which names the imagemap to use for this image (multiple imagemaps may exist on a single page).
# A element, and inside that, elements, each of which defines a single clickable area within the imagemap. These are similar to the tag defining which URL should be opened for an ordinary web link. A title attribute may be provided, which may be rendered as a tooltip if a desktop user hovers their mouse pointer over the area. For web accessibility reasons, it is often important – and in some cases it may even be a legal or contractual requirement – to provide an alt attribute describing the link that screen reader software can read to, for example, blind users.

The 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.

* Rectangle: Set four coordinates: "x1,y1,x2,y2"
* Polygon: Set as many coordinates as desired (a multiple of two): "x1,y1,x2,y2, ..xn,yn"
* Circle: One coordinate-pair and another value with a radius: "x1,y1,radius"

The following example defines a rectangular area ("9,372,66,397"). When a user clicks anywhere inside this area, they are taken to the English Wikipedia's home page.

CSS

A more modern approach is to overlay links on an image using CSS absolute positioning; however, this only supports rectangular clickable areas. This CSS technique may be suitable for making an image map work properly on iPhones, which can fail to rescale pure HTML image maps correctly.

Creation and use

File:JoshuaReynoldsParty.jpg, Image map example of The Club. Clicking on a person in the picture causes the browser to load the appropriate article., 350px, thumb

circle 100 141 20 An unknown portrait
rect 286 87 376 191 unknown painting
rect 450 86 584 188 prob. The Infant Academy 1782
poly 76 224 84 255 43 302 62 400 123 423 121 361 137 344 122 290 111 234 96 225 Boswell - Biographer
poly 133 343 124 287 159 224 189 228 195 291 222 311 209 343 209 354 243 362 292 466 250 463 Dr Johnson - Dictionary writer
poly 190 276 208 240 229 228 247 238 250 258 286 319 282 323 223 323 220 301 200 295 Sir Joshua Reynolds - Host
poly 308 317 311 270 328 261 316 246 320 228 343 227 357 240 377 274 366 284 352 311 319 324 David Garrick - actor
poly 252 406 313 343 341 343 366 280 383 273 372 251 378 222 409 228 414 280 420 292 390 300 374 360 359 437 306 418 313 391 272 415 Edmund Burke - statesman
rect 418 220 452 287 Pasqual Paoli - Corsican patriot
poly 455 238 484 253 505 303 495 363 501 377 491 443 429 439 423 375 466 352 Charles Burney - music historian
poly 503 192 511 176 532 176 534 200 553 219 554 234 541 236 525 261 506 261 511 220 515 215 servant - poss. Francis Barber
poly 501 279 546 237 567 239 572 308 560 326 537 316 530 300 502 289 Thomas Warton - poet laureate
poly 572 453 591 446 572 373 603 351 562 325 592 288 573 260 573 248 591 243 615 254 637 280 655 334 705 396 656 419 625 382 609 391 613 453 Oliver Goldsmith - writer
rect 5 5 720 518 Use button to enlarge or use hyperlinks

desc bottom-left

It is possible to create client-side image maps by hand using a text editor, but doing so requires web designers to know how to code HTML as well as how to enumerate the coordinates of the areas they wish to place over the image. As a result, most image maps coded by hand are simple polygons.

Because creating image maps in a text editor requires much time and effort, many applications have been designed to allow web designers to create image maps quickly and easily, much as they would create shapes in a vector graphics editor. Examples of these applications are Adobe's Dreamweaver or KImageMapEditor (for KDE), and the imagemap plugin found in GIMP.

Image maps which do not make their clickable areas obvious risk subjecting the user to mystery meat navigation. Even when they do, where they lead may not be obvious. This can be partially remedied with rollover effects.

SVG images

Because the Scalable Vector Graphics (SVG) image format provides its own mechanisms for adding hyperlinks and other, more sophisticated forms of interactivity to images, traditional image map techniques are generally not necessary when working with vector images in the SVG format.

See also

* Mystery meat navigation

References

{{reflist

HTML
XHTML
Articles containing image maps