8. Creating Image Maps

An image map is a picture that has various URLs attached to different areas of it. There are two types, one operates on the client side (i.e. the users' browser) and the other works on the server side.  A simple client-side example is given below:

By moving your mouse over the three areas shown as links you will see that the url and the description popup box change.

The essential parts for a client-side image map are: 

  • The image file (i.e. a GIF, JPEG or PNG picture) 
  • Coordinates for each link area 
  • URL to new page - operates when area clicked by the mouse

There are many programs available to help produce an image map (some are built into HTML editors); one useful one is called 'mapedit' and is available to buy from: mapedit

Image maps can also be made using Paint Shop Pro and ImageReady software.

Alternatively there are resources on the web where you can build an image map online. Our client side image map was built using the online resource at : Linked Resources web site

The code generated by the online application is shown below.

 <img src="images/imagemap.gif" border="0"
					usemap="#imagemap"> <map name="imagemap"> <area
					href="http://www.link1.html" ALT="link1" shape="poly"
					<area href="http://www.link3.html" ALT="link3" shape="poly"
					coords="46,49,46,113,91,70,58,70,56,49,44,48"> <area
					href="http://www.link2.html" ALT="link2" shape="poly"
					coords="61,40,142,40,142,64,61,63,61,39"> </map> 

All you need to do with this code is to place it within your HTML document, save it and view the page with a browser. All the work in converting this information into an image map is done by the visitors browser. The image below is the working version of the code above:

link1 link3 link2 >

Server-side image maps

Note: The OUCS server has internal imagemap support, and you do not need a CGI program for server-side image maps.

Up: Contents Previous: 7. Feedback from your site. Next: 9. Server Side Includes