Questions? Feedback? powered by Olark live chat software

Welcome Guest

Chat Support
Toll Free800.955.5201

My Cart 0 items: $0.00

Free shipping on all purchases over $500

*Receive free shipping when you purchase $500.00 or more of products offered by today. If you spend $500.00 or more use this promotional code at checkout: FREEUPS
You will receive Free UPS Ground Shipping** to the continental 48 states. Alaska and Hawaii excluded. Orders exceeding a total weight of 60 lbs,
oversized, and overweight items are not eligible for Free Shipping. Free shipping delivery times are slightly longer. Expect free shipping time to be 5 to 7 days. (ONLINE ORDERS ONLY) This offer cannot be combined with any other discount or promotion.

Image Map Tutorial

January 13, 2010 Lowell Bradford Blog, News & Articles 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.

Leave a comment

Home page footer ads banner