Home      Discussion      Topics      Dictionary      Almanac
Signup       Login
Image map

Image map

Discussion
Ask a question about 'Image map'
Start a new discussion about 'Image map'
Answer questions from other users
Full Discussion Forum
 
Encyclopedia
In HTML
HTML
HyperText Markup Language is the predominant markup language for web pages. HTML elements are the basic building-blocks of webpages....

 and XHTML
XHTML
XHTML is a family of XML markup languages that mirror or extend versions of the widely-used Hypertext Markup Language , the language in which web pages are written....

 , an image map is a list of coordinates relating to a specific image
Image
An image is an artifact, for example a two-dimensional picture, that has a similar appearance to some subject—usually a physical object or a person.-Characteristics:...

, created in order to hyperlink
Hyperlink
In computing, a hyperlink is a reference to data that the reader can directly follow, or that is followed automatically. A hyperlink points to a whole document or to a specific element within a document. Hypertext is text with hyperlinks...

 areas of the image to various 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.

History


Kevin Hughes
Kevin Hughes (www)
Kevin Hughes was one of the pioneers of the World Wide Web in the United States, while a student at Honolulu Community College . He is one of only six inductees in the World Wide Web Hall of Fame announced at the first international conference on the World Wide Web in 1994.He developed the...

 invented the image map while he was a student at Honolulu Community College
Honolulu Community College
Honolulu Community College is a public, co-educational commuter college in Honolulu, Hawaii.The campus is located at 874 Dillingham Bloulevard, north of downtown Honolulu between Honolulu harbor and the neighborhood of Kapālama, at ....

 (HCC).

Definition in HTML


In HTML an imagemap is made of the actual image, that is embedded with the -Tag. The image gets simultaneously the attribute usemap.

The imagemap comprise -Tag and in the detail of the -tags, which defines the fields with the weblinks
Hyperlink
In computing, a hyperlink is a reference to data that the reader can directly follow, or that is followed automatically. A hyperlink points to a whole document or to a specific element within a document. Hypertext is text with hyperlinks...

. These are similar to the -Tag defining which URL
Uniform Resource Locator
In computing, a uniform resource locator or universal resource locator is a specific character string that constitutes a reference to an Internet resource....

 should be opened.

Following code defines a rectangular area (9,372,66,397) with a link to the English Wikipedia:

alternative text




Image maps use


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

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
Samuel Johnson
Samuel Johnson , often referred to as Dr. Johnson, was an English author who made lasting contributions to English literature as a poet, essayist, moralist, literary critic, biographer, editor and lexicographer...


poly 76 224 84 255 43 302 62 400 123 423 121 361 137 344 122 290 111 234 96 225 Boswell - Biographer
James Boswell
James Boswell, 9th Laird of Auchinleck was a lawyer, diarist, and author born in Edinburgh, Scotland; he is best known for the biography he wrote of one of his contemporaries, the English literary figure Samuel Johnson....


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
Joshua Reynolds
Sir Joshua Reynolds RA FRS FRSA was an influential 18th-century English painter, specialising in portraits and promoting the "Grand Style" in painting which depended on idealization of the imperfect. He was one of the founders and first President of the Royal Academy...


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
David Garrick
David Garrick was an English actor, playwright, theatre manager and producer who influenced nearly all aspects of theatrical practice throughout the 18th century and was a pupil and friend of Dr Samuel Johnson...


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
Edmund Burke
Edmund Burke PC was an Irish statesman, author, orator, political theorist and philosopher who, after moving to England, served for many years in the House of Commons of Great Britain as a member of the Whig party....


rect 418 220 452 287 Pasqual Paoli - Corsican patriot
Pasquale Paoli
Filippo Antonio Pasquale di Paoli , was a Corsican patriot and leader, the president of the Executive Council of the General Diet of the People of Corsica...


poly 455 238 484 253 505 303 495 363 501 377 491 443 429 439 423 375 466 352 Charles Burney - music historian
Charles Burney
Charles Burney FRS was an English music historian and father of authors Frances Burney and Sarah Burney.-Life and career:...


poly 501 279 546 237 567 239 572 308 560 326 537 316 530 300 502 289 Thomas Warton - poet laureate
Thomas Warton
Thomas Warton was an English literary historian, critic, and poet. From 1785 to 1790 he was the Poet Laureate of England...


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
Oliver Goldsmith
Oliver Goldsmith was an Irish writer, poet and physician known for his novel The Vicar of Wakefield , his pastoral poem The Deserted Village , and his plays The Good-Natur'd Man and She Stoops to Conquer...


rect 450 86 584 188 prob.The Infant Academy 1782
Joshua Reynolds
Sir Joshua Reynolds RA FRS FRSA was an influential 18th-century English painter, specialising in portraits and promoting the "Grand Style" in painting which depended on idealization of the imperfect. He was one of the founders and first President of the Royal Academy...


rect 286 87 376 191 unknown painting
Joshua Reynolds
Sir Joshua Reynolds RA FRS FRSA was an influential 18th-century English painter, specialising in portraits and promoting the "Grand Style" in painting which depended on idealization of the imperfect. He was one of the founders and first President of the Royal Academy...


circle 100 141 20 An unknown portrait
Joshua Reynolds
Sir Joshua Reynolds RA FRS FRSA was an influential 18th-century English painter, specialising in portraits and promoting the "Grand Style" in painting which depended on idealization of the imperfect. He was one of the founders and first President of the Royal Academy...


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
Francis Barber
Francis Barber was the Jamaican manservant of Samuel Johnson in London from 1752 until Johnson's death in 1784. Johnson made him his residual heir, with £70 a year to be given him by Trustees, expressing the wish that he move from London to Lichfield in Staffordshire, Johnson's native city...


rect 12 10 702 500 Use button to enlarge or use hyperlinks

desc bottom-left


It is possible to create 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
Vector graphics editor
A vector graphics editor is a computer program that allows users to compose and edit vector graphics images interactively on a computer and save them in one of many popular vector graphics formats, such as EPS, PDF, WMF, SVG, or VML....

. Examples of these applications are Adobe's Dreamweaver or KImageMapEditor
KImageMapEditor
KImageMapEditor is a software application for KDE Software Compilation used to edit image maps for use in web pages.It can open an existing HTML file or create a new one based on an image...

 (for KDE
KDE
KDE is an international free software community producing an integrated set of cross-platform applications designed to run on Linux, FreeBSD, Microsoft Windows, Solaris and Mac OS X systems...

), and the imagemap plugin found in GIMP
GIMP
GIMP is a free software raster graphics editor. It is primarily employed as an image retouching and editing tool and is freely available in versions tailored for most popular operating systems including Microsoft Windows, Apple Mac OS X, and Linux.In addition to detailed image retouching and...

.

Image maps which do not make their clickable areas obvious risk subjecting the user to mystery meat navigation
Mystery meat navigation
Mystery meat navigation is a disparaging term coined in 1998 by author and web designer Vincent Flanders to describe a visually attractive but concurrently inefficient, confusing, or abstruse user interface, usually one that is Internet-based...

. Even when they do, where they lead may not be obvious. This can be partially remedied with rollover effects.

Rollover effects


When designing an image map it is important to indicate to the user that the image is mapped. This may be done by a text instruction accompanying the image (like the one illustrating this page), by an indication within the image itself, or by a rollover effect
Rollover (web design)
Rollover refers to a button created by a web developer or web designer, found within a web page, used to provide interactivity between the user and the page itself...

 which will alert the user that different sections of the image will respond differently to their interaction. When using an editor capable of layering images such as Photoshop or GIMP
GIMP
GIMP is a free software raster graphics editor. It is primarily employed as an image retouching and editing tool and is freely available in versions tailored for most popular operating systems including Microsoft Windows, Apple Mac OS X, and Linux.In addition to detailed image retouching and...

, sections of the image may be cut and pasted in place over a copy of the image which has reduced brightness. These highlighted areas will stand out to the user.

Client-side image maps can be implemented so that the user is given a visual indication of what can be clicked on. This can be an indication of the position of all the hot spots, or can be a rollover indication of the currently active hot spot. This functionality cannot be implemented using pure HTML, but can be implemented when a Clickable image is built using a programming environment such as XHTML
XHTML
XHTML is a family of XML markup languages that mirror or extend versions of the widely-used Hypertext Markup Language , the language in which web pages are written....

 with Cascading Style Sheets
Cascading Style Sheets
Cascading Style Sheets is a style sheet language used to describe the presentation semantics of a document written in a markup language...

, ECMAScript
ECMAScript
ECMAScript is the scripting language standardized by Ecma International in the ECMA-262 specification and ISO/IEC 16262. The language is widely used for client-side scripting on the web, in the form of several well-known dialects such as JavaScript, JScript, and ActionScript.- History :JavaScript...

 and Java
Java (programming language)
Java is a programming language originally developed by James Gosling at Sun Microsystems and released in 1995 as a core component of Sun Microsystems' Java platform. The language derives much of its syntax from C and C++ but has a simpler object model and fewer low-level facilities...

.

Rollover effects can be implemented by writing ECMAScript code to swap out the entire image with one that has that particular area highlighted, but this technique can use a considerable amount of bandwidth
Bandwidth (computing)
In computer networking and computer science, bandwidth, network bandwidth, data bandwidth, or digital bandwidth is a measure of available or consumed data communication resources expressed in bits/second or multiples of it .Note that in textbooks on wireless communications, modem data transmission,...

. Another solution is to script one or more page elements to respond as the mouse moves over the image.

See also

  • Kevin Hughes
    Kevin Hughes (www)
    Kevin Hughes was one of the pioneers of the World Wide Web in the United States, while a student at Honolulu Community College . He is one of only six inductees in the World Wide Web Hall of Fame announced at the first international conference on the World Wide Web in 1994.He developed the...

  • Commons:Image map resources

External links