image+maps

= HTML Image Maps = toc

The image map was invented by Kevin Hughes, then a student at Honolulu Community College, by using X and Y coordinates to target an area within a picture. He was inducted into the World Wide Web Hall of Fame in 1994. Tim Berners-Lee presented the award. The idea of image maps took off and now, many sites use image maps to provide site navigation, and information, such as election results in each "hot-spot" state.

A facility may wish to use image maps to engage patrons and present a polished appearance on-line. Understanding how image maps work and potential accessibility issues would allow the facility's web manager to choose whether or not to use image maps and, how to create clear, accessible links. Site maps can also provide demographic information and both mouse-over tags and clickable links to information, for special collections, political or genealogical websites.

What it is, what it does
Image maps are HTML-encoded images which are used, by some web sites, to enhance navigation. As with geographic maps, an image map uses coordinates to describe a location. The coordinates on an image map provide a link to another page, either an internal page within the website, or to an external site. Other types of image links are buttons or clickable icons. The image map may be encoded by a program or, it may be encoded by hand.

Image maps can be fun for webmasters and site visitors. They can also pose accessibility problems for visually impared visitors and for users of text-based browsers such as Linux. One way to avoid accessibility issues is to include "alt" tags for the image, and for the individual links. The "alt" tag is visibile to both text-based browsers and to screen readers. The "alt" tag is added into the coding after the image code or the link code by inserting one space, the word "alt," the equal sign, then the tag enclosed in double quote marks.

There are three shapes for possible use in an image map. They are a circle, called "circle" in the code; a rectangle, called "rect;" and a polygon, or, "poly." In order to designate a particular area of an image as a link, or, "hot spot," coordinates are determined and added to the code. Every image is made up of pixels. Pixels are counted, beginning at the top-left corner, which is coordinate 0, 0. Specific locations, based on the shape of the hot spot, are determined by their location in the image. A circle's coordinates are given by its center point and its radius. A rectangle's points are the top-left and bottom-right corners. A polygon's coordinates correspond to each of its individual points. There are programs which can determine coordinates, which makes designing a web page with image maps a bit simpler for the designer. Hand-coding is more time-consuming. The necessary points can be found through most photo editors, even Paint.

Not all image maps are graphic designs. Some are pictures of buttons or of other, more traditional navigational aids. When a static picture is used, the text will not change, even if the page's font size is changed. This can be an issue for visually challenged site visitors so, try and keep the font large and simple. Whichever type of graphic link is used, it should be clear to site visitors that this is a link.

Image maps with color changes, mouse-overs and other features are coded using either CSS or JavaScript. Simple HTML will only allow for a link. Though image maps are not used as much these days, HTML 5 still has guidelines for them. The instructions below are for a simple, HTML linking image map.

Examples
If you are hand-coding, load the image into an application that reads pixels on images, such as Paint or Microsoft Photo Editor. For a rectangle, hover the cursor over the left top corner of the area you plan to link and record that number. It will be two digits, the number of pixels from the left, then the number of pixels from the top. "44, 120" means forty-four pixels from the left, one hundred and twenty pixels from the top. Once you have written or typed that number, place your cursor over the bottom right corner of the area you plan to link and record those numbers. Then, insert them into your code. An example follows.

For circle spots, hold your cursor over the center of the circle area you plan to link. Record those numbers. Then, find the top of the circle area you plan to link, record those numbers. Figure out the difference between the center and the edge of the circle and record that number. Only three numbers will be used for the circle: the number of pixels in from the left for the center point; the number of pixels from the top for the edge; the number of pixels between the center point and the edge.

For polygons, each point must be mapped in the same way so, five points will have five pairs of numbers, an octagon will have eight. This can produce a very long string of numbers.

Rectangle points are used for the example, which corresponds to the map above.

When the cursor hovers over a hot link on an image map, the link will show up somewhere on the browser. The example below is from a Netscape browser and a garish, red arrow has been substituted for the cursor, since screen captures don't record cursors.

The coordinates: Statehouse coordinates: 44/113 99/113 99/170 44/170 to use in the code: 44, 113, 99, 170 Trinity coordinates: 103/113 129/113 129/139 103/139 to use in the code: 103, 113, 129, 139 USC coordinates: 103/173 158/173 158/233 233/103 to use in the code: 103, 173, 158, 233

If you feel adventurous, create your own HTML document in Notepad or Wordpad, remembering the html, head and body tags. Save the map image above, then type in the code for the image map between the opening and closing body tags. Save the document as an .html file, all types, in the same folder with the map. Right-click and open in (your choice of browsers) and test the links. It will work.

**References**
How-to: [|HTML Source] [|UofSanDiego web development] [|JimThatcher.com] Example of an image map used in a historical context: [|New York State County Image Map: A Brief Early History of the Counties of New York 1523-1927] The inventor of the site map: [|Kevin Hughes dot com] The map from which the above was drawn: [|Columbia Map c. 1920 found at SCIway, drawn from University of Texas historical map of Columbia]