Image Map
A graphic divided into regions or “hotspots.”, that when clicked, accesses a web page that is linked to a particular region.
A typical example of an image map is a website that offers national information organized by state. Clicking on a state on a map of the United States calls up the appropriate page. Image maps can also be used as website homepages, wherein a graphic illustrates the various areas of the site, and clicking on a particular section opens the corresponding site page.
Image maps are used when a visual display is more effective than a text-based menu system. In the example above, providing an alphabetical list of each state with hyperlinks to their corresponding information page would work fine, but providing a map makes it easier for users to locate their particularly state and may also provide additional benefits, such as the ability to color-code sections to provide additional information. News sites often use this type of image map to present election-night results, wherein each state is color-coded by the candidate or party that won the majority of votes and clicking on an individual state will take readers to detailed, state-specific election results.
Also See: Anchor, Hyperlink, Bitmapped Image
Frequently Asked Questions
How do I create an image map?
Any image can be turned into an image map. The easiest way is to use image map creation software, web development suites such as Adobe’s Dreamweaver, or by using a plug-in for your web creation software or content management system. You can also create one using standard HTML, by first attributing an image as an image map, and then assigning clickable regions to the image based on their shape and coordinates.
Does the clickable section of an image map have to be a certain shape?
You can create clickable regions of predefined shapes, such as rectangles and circles, or you can create a free-form shape, such as the shape of an individual state or even the shape of individual persons in a photograph. Free-form regions become more difficult when coding the image map in HTML, as you would need to know the coordinates for every turn; however, this can easily be managed using image map software or plugins, many of which allow you to draw the outline with your mouse or a stylus.
How do I know where each part of an image map is linked to?
As with any hyperlink, hovering over a clickable region in an image map will display the destination URL, either as a pop-up or along the lower-left corner of your web browser’s screen. On a mobile device, press and hold the clickable section to see its destination.
How can I tell if a picture is an image map?
If you’re using a desktop or laptop, swipe your cursor over the image. If the link address changes as you move to different regions, it’s an image map. Some image maps may even highlight the regions as you hover over them. It is more difficult to identify an image map on a mobile device; in those cases, you may need to press on various parts of the image to see if you get different links.