Aloak Inc.
Check Your Domain
New Registration
Transfer Registration
Renew Registration
Look Up Info On My Domain
Change Contact Info For My Domain
Change DNS Info For My Domain
Business Directory
Employee List
Customer List
Leads Database
Product List


Using Image Maps
Image Map Home Customer Information Centre Return to this page! Try out an image map, click on the image!

An image map is a graphic with defined areas, each with it's own HTML link. Image maps are most commonly used for navigation bars.

The type of image map described here is referred to as a client side image map. This means that the image map code is included right in the web page text.

Including an image map in a web page requires some home work. Before adding the code to your web page text you must make a note of the links you wish to create and the coordinates of the areas within your image. There are many utilities that will do this for you. We recommend that you download an image mapping utility from Tucows. Any of these utilities will allow you to load the image and using a point and click graphic interface, define areas and assign HTML links to each. They will even create the code for your web page (as described here) so that you just have to insert the code into your web page.

Once you have the image, links and coordinates ready you simply have to insert them into your web page. The image tag must include the usemap directive. Using our example from above the image tag looks like this:
<IMG SRC="http://www.aloak.com/images/imagmap.gif" USEMAP="#imap1">

The map is then defined with a line for each area between a map start and a map end tag. The text below demonstrates the code used for the image map above. The start tag simply includes the map name as referred to in the usemap directive. Each area is then defined using an area tag which includes the shape, coordinates and a link definition (href). Each coordinate is specified using a number pair consisting of the pixels horizontally and vertically from the top left of the image. In the case of a rectangle, two points are defined, the upper left and the lower right of the rectangle. Notice that there is a default area defined. This is optional, it creates a link for the parts of the image not explicitly mapped to a defined area. Finally the map definition ends with the map end tag.

<MAP NAME="imap1">
<AREA SHAPE="RECT" COORDS="16,9,100,45" HREF="/index.html">
<AREA SHAPE="RECT" COORDS="27,92,93,126" HREF="../info/index.html">
<AREA SHAPE="DEFAULT" HREF="../info/imagemap.shtml">

More detailed information on client side image maps can be found at the World Wide Web Consortium.

Aloak eSolutions


Actinic Support
Actinic FAQ
Domain Services
CA Domain FAQ
International Domain FAQ
Change My DNS
Update Contact Information - CA Domains
Update Contact Information - International Domains
Email Configuration
Using MailManager
Using Netscape
Using Microsoft Outlook
Publishing Web Pages
Using WebManager
Using FTP
Web Page Utilities
Web Forms
Counter Data File Creation
Image Maps
GO! Page Selector
Website Search
Quick Contact
Send Us a get Started Request
Phone Us