TIP

Images map can use any graphic, simple or complex as long as it can be saved as a gif or jpeg file. This allows for numerous design opportunities.

TIP
If you are viewing this page in Internet Explorer you will probably here a looping sound. This is a wav sound. Look at the code and you can place your own wav file into your web page. The "Loop' part of the tag can be any number you wish to loop the sound. Placing infinite or -1 will make the sound continuous.

Glossary

An imagemap is a navigational tool which allows the user to use hot links from an image rather than text. Thus each hot link will direct the user to a URL or HTML page

Glossary

An client-side imagemap runs more quickly because they are interpreted in your users' browser. They do not require a CGI script, and therefore are are simpler to create. The two examples on this page are client-side imagemaps.

Image Maps

The buttons shown above and the numbers shown below can each be clicked on with your mouse, and this action will take you to another HTML page.

This image map tutorial is for the beginner and the tools suggested are easy to learn programs to enable you to create your first image map. You therefore could use any text editor, graphics programs or mapping utility to achieve the same results.

To create this type of clickable map these programs have been used:

• Wordpad - to create the html file, adjust map coordinates
• PaintShop Pro - to capture image for image map
• Mapedit - to work out coordinates of image map.

	Use a graphics package such as Photoshop, PhotoPaint, Illustrator, Corel Draw, FreeHand to create the image and include numbers one through to ten. You can also use Microsoft Word if you do not have the graphic skills.
	Use Paintshop Pro or a capture program to capture the image.
	In Paintshop Pro or graphics package save the image file with as a transparent background gif.
	In Wordpad, text editor or Web authoring software create a basic Web Page with the image inserted
	In PaintShopPro map out the coordinates of the area around each number in pixels.
	You can use a program like MapEdit to facilitate marking out the area of each number and assigning URLs to each one.
	In Wordpad you may edit the resultant HTML so you could map the areas more precisely.
	If you do not have PaintShopPro or MapEdit, you could copy and paste the image and html code into your page. You could replace the image with one similar in dimensions or adjust coordinates. The latter technique may require a little practice.

In your browser, for example, in Netscape, you can view the underlying HTML by choosing View, then Document or Page Source.

Go to the previous page.
Go to the next page.
Go to the Home page.