An image map
Look at the graphic above. It looks just like any image file you might have come across on the web. But using some HTML code this image has become an image map. That means it has defined areas on its surface that can be used to trigger HTML events. Like for example going to another page. Move your mouse pointer over the image. Notice how the pointer turns to an action hand in certain areas of the image? Click one of these "hot spots".
Image maps and their "hot spots" are mostly used for navigation functions, such as moving to another page. But they can also be used to trigger advanced HTML and Java Script events. Using HTML you can define "hot spots" in various shapes as shown above.
Types of image maps
There are two types of image maps: Server-Side and Client-Side. Server-side maps use separate map files that have to be downloaded as well. They also depend on the server for translation, creating additional network traffic. Client-side maps reside within the HTML document, and use the local user's browser to perform the translation. Since client-side maps were introduced later they do require Netscape 2.0+ or Internet Explorer 2.0+ to work.
Examples of image maps
Image maps are used all over the web. Some are highly creative and are not easily identifiable as image maps, such as this Atlas web magazine page. The image map in the center is the site logo with some text used for navigation. Some users might not know where to click since they do not look like buttons.
Others are strictly utilitarian, such as the navigation tool to the left on this NASA crew page. The image is just several lines of text, each linked to a different page or URL. One large image map is used instead of many different small name images. This makes it much easier for the web designer to keep track of the buttons. It also speeds up the time needed to download the page.
Another example of an image map can be found on my
homepage site. The graphic is used to visually represent some of the links on the page. Since this might not be obvious to all users, it is wise to include duplicate text links as well.
Want to see some more examples? Below are some URL's submitted by people who have used the tutorial to make image maps. To add yours, complete the evaluation at the end of the tutorial.
Return to the Tutorial main page. Stuck? Try the F.A.Q. Want to comment on this tutorial? Send email to page designer Kaspar Stromme.