How image maps work

From Wiki
Jump to: navigation, search

By Derek Clarkson‎

For those of you who aren't familiar with HTML. Image maps are where we use a single graphic to indicate several different and clickable options. For example, the OS/2 Zone home page uses a single large image map to graphically show you the various areas of the magazine.

To actually make a Image Map happen an extra parameter is added to a standard IMG tag. This parameter is "ISMAP" and indicate that the graphic refered to by IMG is to be treated as a Image Map. For example:-

<IMG SRC="./buttonbar.gif">

Around IMG tag goes a standard Anchor tag where the URL is the path to an imagemap processing program. It also passes in this URL the URL of a file which contains the URLs for the map. For example:-

<A HREF="/cgi-bin/imagemap/./misc/"><IMG SRC="./buttonbar.gif"></A>

This map file contains the URLs that are to be used when you click on the map. Fir example, the standard one at the top of this page looks like this:-

default /misc/imagemapfyi.html
rect /misc/misc.html 0,28 68,48

Which defines the default URL for the map and the URL for the home page if you click on the Home button.

The whole thing then works like this: when you click on the image map, the image map program is called and the web explorer passes it the name of the file containing the URLs and the xy co-ordintes of the mouse over the graphic. From this the image map program which URL was represented by the area under the mouse and then sends back the target URL.