Image Maps for your Web Page

Image Maps are Images that allow movement through web documents using your computer's pointing device (mouse).

Image maps, once mastered, are very simple. But for the beginner, they can be infuriating.

There used to be two choices when it came to image maps: client-side or server-side.

These days, however, client-side image maps are the standard in image mapping.

Server-side image maps won't be covered in this section because the technology used to create them has long since been superseded.

Client-side maps work on the user end. This method works great, but if a browser can't handle them (like Netscape 1.0), a visitor can't use them, though anyone using Netscape 2.0 or higher is capable of handling them.

Depending on how your Web Server is set up, you may be able to put image maps in the server's CGI binary directory, where a variety of scripts, maps, forms, etc. may reside. Many servers have a special script called htimage set up to let any valid user (with an account on the server) include image maps in their Web pages.

Server-Side maps work somewhat similar to client-side maps. When a server-side map is clicked, the CGI program on the server runs and brings up the appropriate URL for the browser to load. Server-side maps require CGI access.

However we will only be covering client-side image mapping here.

• Images Maps Allow For Rapid Navigation of Web Documents.
• Images Maps Draw Our Attention Readily, maikng them visible guideposts
• Images Maps can add Drama to a Web page

Image Maps should be used to make your pages both functional and FUN. Generally, it is good design practice to use no more than one or two images maps on a given page.

This is primarily for two reasons:

• Loading images associated with a page takes time (especially if you are using a slow modem or the Web server supplying the image is busy).
• Use of too many pictures can be distracting, taking away from the focus of the page.

Client-side imagemaps also do not require the presence of a server-side script in order to interpret the coordinates of the "hot" regions of your multi-clickable image. The client-side imagemap is much more efficient than the server-side imagemap and it allows the visitor to see the actual URL associated with the mapped regions in the status bar of their web browser.

Sample code for a client-side image map might look like this:

<MAP NAME="MainMap">
<AREA SHAPE=RECT COORDS="0,0,187,30" HREF="tags/">
<AREA SHAPE=RECT COORDS="1,31,187,56" HREF="forms/">
<AREA SHAPE=RECT COORDS="1,56,187,77" HREF="tables/">
<AREA SHAPE=RECT COORDS="1,77,187,100" HREF="frames/">
<AREA SHAPE=RECT COORDS="1,170,187,197" HREF="editors.html">
</MAP>

<IMG SRC="picts/mainmap.gif" WIDTH=187 HEIGHT=239 BORDER=0 ALT="The HTML Tutor" USEMAP="#MainMap">

The <MAP></MAP> defines that this is indeed a map, and NAME names the map for use in the browser, referenced in the <IMG SRC>. Now for the tags within the map:

AREA SHAPE=rect/circle/poly - defines the shape of the area that will be the link
COORDS="1,2,3,4" - these define the coordinates of the circle, polygon or rectangle
HREF="file.html" - this is a hypertext link that this area of the map will refer to

We end it up with the <IMG> tag for the image that uses the map. You'll notice that it is the same as all other tags but it has USEMAP="#MainMap". Without this, the map will not work. This is what tells the browser that the picture being loaded should be associated with the map and used accordingly.

There are two ways to calcualate the coordinates. The easy way is to download Map This!, an excellent image map editor for Windows 95. The second is to use a graphics program such as PaintShopPro, Adobe Photoshop or any other graphics program which displays coordinates, to manually record the coordinates on the image.

The coordinates and "hot" areas of a client-side imagemap are defined within the html document itself. If we use the cube image below, here is what the html code would look like:

<map name="cube">
<area shape="rect" coords="1,1,37,37" href="square1.html">
<area shape="rect" coords="37,1,74,37" href="square2.html">
<area shape="rect" coords="1,37,37,74" href="square3.html">
<area shape="rect" coords="37,37,74,74" href="square4.html">
</map>

Note that no default is required, because the user simply will not be able to click outside the defined "hot" areas.

The actual image link should look like:

<img src="cube.gif" usemap="#cube">

Note that there is no anchor around this image tag, but it should have usemap pointing back at the exact name of the map you've defined in your document.

Here is the imagemap in action: (note you'll only be able to use this if you're using Netscape 2.0 or higher, or a recent version of Internet Explorer.)

The following is an example of a Client Side Imagemap:

If you view the source of this page you will see that this imagemap was created with the following tags:

<MAP NAME="MyMap">
<AREA SHAPE="rect" COORDS="1,114, 224,150" HREF="communication.html">
<AREA SHAPE="polygon" COORDS="10,15,99,4,105,24,77,57,23,54"HREF="web.html">
<AREA SHAPE="circle" COORDS="162,55,50" HREF="earth.html">
<AREA SHAPE=default HREF="none.html">
</MAP>

<IMG SRC="webcomi.gif" USEMAP="#MyMap">