C & G web - Imagemaps

Introduction to Imagemaps

An imagemap is a graphic image in a web page that has clickable regions. These hotspots are each linked to different page of HTML by a Hypertext Link so when you click on them your browser jumps to that page.

This module looks at three ways of making imagemaps and how they are used.

Learning Objectives

To familiarise learners with the concept of imagemaps.
To show users the difference between server side and client side imagemaps.
To support ways in which imagemap can be utilised.
To instruct learners how to create their own client side imagemap.

Requirements: Image manipulation software.

How to make Imagemaps

There are two methods to choose from when building an imagemap:

Client-side imagemaps use no server resources and depend solely on the browser to create the imagemap effect. They only work with version 3.0 and later browsers.
A server-side imagemap relies on the server's imagemap program to deliver the imagemap to users. This is the way imagemaps were first generated, but it is used much less often today. It is still useful if you want your site to support older browsers.

Technically, there is a third method which involves taking your image and cutting it up into smaller images which each have a hyperlink. This is sometimes referred to as a pseudo-imagemap.

Imagemap Software

The practical exercises in the course require you to create a client-side imagemap. To complete this task imagemap software will be required to identify areas of an image that you want to make hotspots.

If your image editing software provides you with the X,Y coordinates of a selected area then you will not need any specific imagemap software. However, for those you wish or need to use imagemap software, information and download links are available below. Please read the information to check the download is suitable for your computer.

The following links are both external. They will open in a new window.

Why use Imagemaps?

There are many ways of incorporating imagemaps to create a more interesting and easier-to-navigate site.

For example:

You might have a site that contains information about different streets in your local area. Instead of having to list all the streets you could use a local map. When you click on a street name you jump to the relevant information.
Many companies provide an imagemap that represents their website. It is a navigation tool that you use to move around within a website.
You may have an image of a building. Clicking on each window of the building will take you to a page of information on the inhabitants.

Remember that some people turn off graphics in their browsers or use a browser that doesn't handle graphics. When using an imagemap, you may also include a set of hyperlinked text that provides links to the same information as the imagemap.

Previous page...

Christopher Ward London Limited