Use your favorite graphics software to map the points for your clickable regions. Then setup your client-side, CERN, or NCSA image information.

Client-side image mapping is the most common image mapping technique in use today.  The client is your local computer running a browser, such as Internet Explorer or Netscape.  Your browser has to determine the actual mapping based on the map information given in the html code.

The code for the image map is embedded into the HTML page.

<map name="12345L" id="12345L">
<area shape="rect" coords="0,0,25,25"
href="/chapter6/chapter6p1.htm" title="Page 1" />
<area shape="rect" coords="25,0,50,25" href="/chapter6/chapter6p2.htm" title="Page 2" />
<area shape="rect" coords="50,0,75,25" href="/chapter6/chapter6p3.htm" title="Page 3" />
<area shape="rect" coords="75,0,100,25" href="/chapter6/chapter6p4.htm" title="Page 4" />
<area shape="rect" coords="100,0,125,25" href="/chapter6/chapter6p5.htm" title="Page 5" />
<area shape="rect" coords="125,0,150,25" href="/chapter6/labassignment6.htm" title="Lab Assignment 6" />
<area shape="default" nohref="nohref" title="" />
</map>

An example of this type of a client-side image map can be found at http://www.hometownmn.com.  Click on the agents.

A couple of other sites that utilize image maps:

• Safe Drinking Water Infomation System uses an image map for the states.
• International Nuclear Safety Center has small hot spots.

Server side image mapping was a technology that was used when web browsers did not yet have the capability of supporting client-side image maps. (Pre Netscape 3.0).  The server determined the actual mapping.  Typically server-side image maps are not used much anymore.

The code for the server-side image map is stored in an external file on the server. This type of image map uses either CERN (IIS) or NCSA (Apache) format.  The server that this web site (ridgewater.net) is running on uses NCSA (Apache).  (Each finger on the image below takes you to a different page.)

If you look at the status bar at the bottom of your browser, you will notice coordinate pairs changing when rolling over the image in the following example.