543:
25:
570:
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.
169:
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).
141:
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
558:
553:
618:(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.
556:
550:
574:
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
555:
551:
552:
557:
549:
559:
554:
530:
absolute positioning; however, this only supports rectangular clickable areas. This CSS technique may be suitable for making an image map work properly on
548:
246:
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
393:
The following example defines a rectangular area ("9,372,66,397"). When a user clicks anywhere inside this area, they are taken to the
379:). 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.
546:
292:, and do not require any special logic to be executed on the server (they are fully client-side). They also do not require any
731:
547:
89:
61:
347:
reasons, it is often important – and in some cases it may even be a legal or contractual requirement – to provide an
146:
is to provide an easy way of linking various parts of an image without dividing the image into separate image files.
108:
68:
606:. Even when they do, where they lead may not be obvious. This can be partially remedied with rollover effects.
46:
75:
704:
42:
327:
elements, each of which defines a single clickable area within the imagemap. These are similar to the
57:
277:
and the server should respond appropriately (for example, by returning a text-only navigation page).
615:
332:
647:
627:
603:
35:
576:
563:
316:
which names the imagemap to use for this image (multiple imagemaps may exist on a single page).
683:
158:
8:
566:. Clicking on a person in the picture causes the browser to load the appropriate article.
602:
Image maps which do not make their clickable areas obvious risk subjecting the user to
82:
386:
Polygon: Set as many coordinates as desired (a multiple of two): "x1,y1,x2,y2, xn,yn"
727:
720:
394:
344:
584:
802:
797:
791:
352:
769:
389:
Circle: One coordinate-pair and another value with a radius: "x1,y1,radius"
270:
251:
747:
675:
596:
580:
166:
293:
356:
138:
661:
24:
289:
531:
340:
343:
if a desktop user hovers their mouse pointer over the area. For
722:
Web Pages That Suck: Learn Good Design by
Looking at Bad Design
526:
A more recent approach is to overlay links on an image using
134:
126:
534:, which can fail to rescale pure HTML image maps correctly.
592:
174:
122:
588:
527:
274:
255:
247:
662:"HTML: The Markup Language (an HTML language reference)"
339:
attribute may be provided, which may be rendered as a
304:
A client-side imagemap in HTML consists of two parts:
49:. Unsourced material may be challenged and removed.
719:
789:
133:is a list of coordinates relating to a specific
545:
383:Rectangle: Set four coordinates: "x1,y1,x2,y2"
668:
579:. Examples of these applications are Adobe's
335:should be opened for an ordinary web link. A
308:the actual image, which is embedded with the
772:. World Wide Web Consortium. 16 August 2011
750:. World Wide Web Consortium. 16 August 2011
599:also includes a dedicated ImageMap editor.
16:Method of adding links to parts of an image
312:tag. The image tag must have an attribute
109:Learn how and when to remove this message
717:
595:. The free and open-source office suite
541:
790:
486:"https://en.wikipedia.org/"
591:), and the imagemap plugin found in
47:adding citations to reliable sources
18:
537:
355:software can read to, for example,
351:attribute describing the link that
13:
770:"SVG specification: Interactivity"
705:"LibreOffice ImageMap editor help"
14:
814:
718:Flanders, Vincent (March 1998).
273:must not be added to the anchor
265:If the browser does not support
23:
185:tag to be inside an anchor tag
34:needs additional citations for
762:
740:
711:
697:
654:
648:"IMG extension for Mosaic 1.1"
640:
280:
254:and will access the resulting
149:
1:
633:
609:
748:"SVG specification: Linking"
726:. San Francisco: Sybex Inc.
367:elements can be rectangles (
299:
7:
621:
10:
819:
323:element, and inside that,
616:Scalable Vector Graphics
477:"9,372,66,397"
399:
214:"/imagemapper"
199:
157:were first supported in
628:Mystery meat navigation
604:mystery meat navigation
423:"Website map"
286:Client-side image maps
577:vector graphics editor
567:
521:
187:<a>...</a>
177:code for this type of
163:Server-side image maps
155:Server-side image maps
137:, created in order to
684:Penn State University
562:Image map example of
561:
504:"Knowledge"
495:"Knowledge"
414:"image.png"
229:"image.png"
179:server-side image map
676:"Image Maps in HTML"
432:"#mapname"
159:Mosaic (web browser)
43:improve this article
450:"mapname"
288:were introduced in
568:
733:978-0-7821-2187-2
395:English Knowledge
345:web accessibility
193:must include the
119:
118:
111:
93:
810:
782:
781:
779:
777:
766:
760:
759:
757:
755:
744:
738:
737:
725:
715:
709:
708:
701:
695:
694:
692:
690:
672:
666:
665:
658:
652:
651:
644:
544:
538:Creation and use
517:
514:
511:
508:
505:
502:
499:
496:
493:
490:
487:
484:
481:
478:
475:
472:
469:
468:"rect"
466:
463:
460:
457:
454:
451:
448:
445:
442:
439:
436:
433:
430:
427:
424:
421:
418:
415:
412:
409:
406:
403:
378:
374:
370:
366:
350:
338:
330:
326:
322:
311:
268:
261:
260:/imagemapper?3,9
242:
239:
236:
233:
230:
227:
224:
221:
218:
215:
212:
209:
206:
203:
196:
192:
188:
184:
114:
107:
103:
100:
94:
92:
51:
27:
19:
818:
817:
813:
812:
811:
809:
808:
807:
788:
787:
786:
785:
775:
773:
768:
767:
763:
753:
751:
746:
745:
741:
734:
716:
712:
703:
702:
698:
688:
686:
674:
673:
669:
660:
659:
655:
646:
645:
641:
636:
624:
612:
585:KImageMapEditor
560:
542:
540:
524:
519:
518:
515:
512:
509:
506:
503:
500:
497:
494:
491:
488:
485:
482:
479:
476:
473:
470:
467:
464:
461:
458:
455:
452:
449:
446:
443:
440:
437:
434:
431:
428:
425:
422:
419:
416:
413:
410:
407:
404:
401:
376:
372:
368:
364:
348:
336:
331:defining which
328:
324:
320:
309:
302:
283:
266:
259:
244:
243:
240:
237:
234:
231:
228:
225:
222:
219:
216:
213:
210:
207:
204:
201:
194:
190:
186:
182:
152:
115:
104:
98:
95:
52:
50:
40:
28:
17:
12:
11:
5:
816:
806:
805:
800:
784:
783:
761:
739:
732:
710:
696:
667:
653:
638:
637:
635:
632:
631:
630:
623:
620:
611:
608:
539:
536:
523:
520:
400:
397:'s home page.
391:
390:
387:
384:
377:shape="circle"
375:) or circles (
361:
360:
317:
301:
298:
282:
279:
258:(for example,
200:
161:version 1.1.
151:
148:
117:
116:
99:September 2023
31:
29:
22:
15:
9:
6:
4:
3:
2:
815:
804:
801:
799:
796:
795:
793:
771:
765:
749:
743:
735:
729:
724:
723:
714:
706:
700:
685:
681:
680:AccessAbility
677:
671:
663:
657:
649:
643:
639:
629:
626:
625:
619:
617:
607:
605:
600:
598:
594:
590:
586:
582:
578:
572:
565:
535:
533:
529:
398:
396:
388:
385:
382:
381:
380:
371:), polygons (
358:
354:
353:screen reader
346:
342:
334:
329:<a> tag
318:
315:
307:
306:
305:
297:
295:
291:
287:
278:
276:
272:
263:
257:
253:
249:
198:
181:requires the
180:
176:
171:
168:
164:
160:
156:
147:
145:
140:
136:
132:
128:
124:
113:
110:
102:
91:
88:
84:
81:
77:
74:
70:
67:
63:
60: –
59:
55:
54:Find sources:
48:
44:
38:
37:
32:This article
30:
26:
21:
20:
774:. Retrieved
764:
752:. Retrieved
742:
721:
713:
699:
687:. Retrieved
679:
670:
656:
642:
614:Because the
613:
601:
573:
569:
525:
392:
373:shape="poly"
369:shape="rect"
365:<area>
362:
325:<area>
313:
303:
285:
284:
271:query string
264:
252:query string
245:
178:
172:
162:
154:
153:
143:
130:
120:
105:
96:
86:
79:
72:
65:
53:
41:Please help
36:verification
33:
597:LibreOffice
581:Dreamweaver
321:<map>
310:<img>
281:Client-side
197:attribute.
191:<img>
183:<img>
167:web browser
165:enable the
150:Server-side
58:"Image map"
792:Categories
634:References
610:SVG images
294:JavaScript
235:/></
69:newspapers
689:6 October
300:Pure HTML
269:then the
144:image map
139:hyperlink
131:image map
622:See also
564:The Club
290:HTML 3.2
217:><
189:and the
776:24 June
754:24 June
532:iPhones
341:tooltip
314:usemap,
83:scholar
730:
471:coords
426:usemap
359:users.
85:
78:
71:
64:
56:
803:XHTML
587:(for
510:</
507:/>
498:title
462:shape
435:/>
357:blind
337:title
267:ismap
250:as a
232:ismap
195:ismap
135:image
129:, an
127:XHTML
90:JSTOR
76:books
798:HTML
778:2019
756:2019
728:ISBN
691:2013
593:GIMP
516:>
480:href
459:area
456:<
453:>
444:name
438:<
402:<
363:The
241:>
208:href
202:<
175:HTML
173:The
125:and
123:HTML
62:news
589:KDE
583:or
528:CSS
522:CSS
513:map
489:alt
441:map
417:alt
408:src
405:img
349:alt
333:URL
275:URL
262:).
256:URL
248:URL
223:src
220:img
121:In
45:by
794::
682:.
678:.
319:A
296:.
780:.
758:.
736:.
707:.
693:.
664:.
650:.
501:=
492:=
483:=
474:=
465:=
447:=
429:=
420:=
411:=
238:a
226:=
211:=
205:a
112:)
106:(
101:)
97:(
87:·
80:·
73:·
66:·
39:.
Text is available under the Creative Commons Attribution-ShareAlike License. Additional terms may apply.
