My Cart

You have no items in your shopping cart.


Product was successfully added to your shopping cart.

Image Map Tutorial

January 13, 2010 Lowell Bradford News & Articles,Blog 0 Comments

Image Map Tutorial

Image Maps are a way to create images which have multiple links embedded within them. For instance an image with a map of the United States could be configured so that each state when clicked would link to a web page describing that individual state. Image Maps were once a very efficient way to accomplish this behavior. Today Image Maps are rarely used as other technologies have made the same behavior easier to achieve.


Originally to achieve the behavior of an image map web masters simply made several images, used table to arrange them, and made each image a link. This was time consuming; a single map had to be cut into several image and manually arranged using HTML code to appear as one image. Early image maps used server side code to get the coordinates of the mouse when a user clicked an image. Based on these coordinates a script or program would redirect the user to a different page. In HTML 3.0 the Map tag made it possible to do this all within the browser without having to enable any server side scripting.

Types & Code

Server side Image maps vary from server to server. Essentially all work the same however; they send the coordinates of the mouse when a user clicks an image to the server. The server then runs a program or script and sends a header redirect to the browser telling it to open a different page. To do this server side image maps use an ISMAP tag within the image source tag. The HTML Map tag allows for browser only, client side, image maps. To accomplish this a 'usemap' tag is added to the image source tag with the name of a specific map to use. Then a separate map tag is created which is named with the name specified in the usemap. This contains a list of coordinates and links so the browser knows where to link. Coordinates that are not specified do not link to anything.

Automatically Generating Image Maps

The easiest way to generate a client side image map is to use a professional Web Design program. Adobe GoLive, Adobe Dreamweaver, and Microsoft Front Page all feature tools to accomplish this. Further numerous web sites have utilities that allow you to upload an image and create the code for an image map without having to enter coordinates by hand.

Alternative Technologies

Today Image maps in general are seldom used. A simple alternative, albeit one that only allows for square linkable areas, is to use tables. In this case the image is made the background for a table defined by the size of the image. Then invisible gifs are placed in table cells with inks to the desired locations. Both Java Applets, and Flash are suitable alternatives for image maps, offering advanced transition effects to enhance the user experience. JavaScript today can also be used to implement Image Map like behavior without any server side coding.

Contact Customer Servise

Contact Tecnical Support

sign up for special offers and latest news
sign up for special offers and latest news
Request a Quote
sign up for special offers and latest news
Return Request
sign up for special offers and latest news