Image maps

The web pages Web of recent years show more and more graphical content, accompanied by visual effects like the changes of image (mouseover effects). Nevertheless, many designers have somewhat forgotten the image maps technique. It is a pity that it has nearly succumbed to other trends in graphical navigation. Although the “traditional” technique to include image maps is dated and has some definite downsides, without a doubt, the image maps are a superb tool to establish navigation for a website, and they are full of advantages. They are much more simple to prepare, easy to update, and they can be really sophisticated. In this article we will study them with some detail, and we will offer all the necessary hints to use them and to take advantage of them.

This article will introduce some basic concepts and possibilities of image maps in web design. However, like we have already mentioned, the traditional image maps are a somehow dated technique. There are some problems with text-based browsers, and accessibility issues with image maps that can be avoided with some new, CSS based techniques like the one described in the A List Apart article, The night of the image map.

scheme of an image map

What is an image map

Regardless of the technique used (be it the traditional image map technique with the MAP tag, or newer, CSS-coded alternatives), the idea of image maps is rather simple. In an image, active areas are defined (hotspots) that will act normal links in the HTML code. For example, and remembering the map name itself, it can be a representation of a country. Clicking on the different regions it is acceded to a page that show information on them.

Two types of definition of image map exist for simple, HTML-only markup. The first type is based on the server, which executes the orders received from the client (the navigator program). This model is in disuse; in spite of being compatible with the oldest navigators, it involves many technical disadvantages and it is more inefficient.

Nearly the 100% present day navigator programs admit the image maps based on the client side. The definition of the active areas of the map is within the HTML, so it downloads with the page itself and is accessible instantly. In addition, the client-side image maps still work when you go offline or you browse a page saved to your computer.

To prepare an image map is relatively simple, as we will see in a moment. Many designers have left them aside in favor of compositions of sliced images, with more visual effects like mouseovers, sometimes with the mistaken idea that an image map does not admit certain kinds of actions (scripts). In fact, you can attach actions to the image map areas the same way you would do with a normal link or linked image. For example, it is possible to make an alternate image show when the active zone of the map is moused over. This can imply a little extra work, but it is not very complicated.

Advantages of image-map navigation

It is a easy way to adapt the links to a very complex distribution of images, which would be more complicated to recreate like tables or layers (DIVs) and small, sliced images. It is enough to resort to a unique image and to define hotspots.
They admit the Javascript events that add dynamism to the Web pages.
They can be easily reused once defined, so you save lots of work at the time of implementing them.
Everything can be updated in the Website changing only the images that constitute the maps. It is not necessary to touch any HTML markup as long as the active zones remain unchanged with the new images. This means you may create a single navigation image map, then add a new look and feel to each section or page simply changing the image used in this part of the web.
An image map is practically compatible with any navigator who exists. However, certain effects of mouseover or dhtml work only with the last versions of navigators, and they are sometimes incompatible with certain browsers.
In case that the images have not been loaded, the map continues being active. If a textual label is added to describe the images, this one will appear in the navigator in the case that the image isn’t available for display.
All these advantages make of the image maps a powerful instrument of design and a formidable navigation tool.

Some use suggestions for image maps

There are many possibilities for this navigation system. Let’s see some interesting ideas:

The most obvious application, is to construct a space metaphor, like a geographic map, a plane of a construction, parts of a machine, an organism, an object... Clicking in one hotspot it leads to the corresponding description, we go to a related page or a section where more information is offered. Here’s an amusing and simple, if rather silly, example (the links do not work actually, but you will get the idea anyway.) For example, if you hover just a little on each part of the image you should see the title of the link popping up.

They are an excellent form to define navigation in a Web. You can establish a metaphor for the navigation in the site (for example, you could make differents parts of a picture correspond with the different parts from a real store); you can also use icons, representative folders, images... again, the limit is your imagination. The relevant part of a graphic can be activated only when it is clicked, instead of the whole image.

An image map is very useful for large images; in this case it can be desirable that the link resides only in one part of the whole area.

Image maps can be used like a didactic resource; for example, to include an image that contains valid links only in the correct zones. If the image includes words, the user would have to click on the right hotspots.

As you may have guessed by now, Image maps in most cases need both normal eyesight and ability to use the mouse. This would rule out handicapped users and those users who prefer to use a text-based browser like Lynx. The usual techniques commented on this page are safe, then, only of projects that you are sure to run only with audiences with no conditions that could prevent them to use the image maps. For a more general approach, entirely based on XHTML and CSS code, see the excellent technique documented in A list apart.

Creation of the image maps

To prepare an image map cannot be simpler. Most of the existing web publishing programs include this option. You only have to include the image, select it and mark the active regions, to which the corresponding link is assigned.

Hotspots may have rectangular (or square) shape, circular shape or polygonal shape. This last option is ideal when you need an active area delimited with precision. Regletably, for the non professional user, the free programs (FrontPage Express or Mozilla Composer) do not include this feature.

If we do not have the possibility of generating image maps from our publisher, some freeware solutions exist, specifically destined to this aim, for example: MapMaker32; Meracl Imagemap Generator 3.4; Automata Web Hotspots Imagemapper 4.02; CoolMap 3.0; TS Imagemapper 2 and others. You can find these or related utilities in a good programs server like www.download.com or www.softonic.com.

Coding image maps with HTML

What happens if we cannot or we don’t want to use a program that creates the image map visually? We will have to deal a little with the page markup, its HTML code. This can be intimidating to those new to web design, although it is not so difficult if you have near at hand some image viewer/editor, even a very basic one, like PaintShop Pro or the free IrfanView. You’ll hve to write down the coordinates (the corners from the rectangles that will define “hotspots” — it is enough to move the cursor to the wished positions and pay attention to the state bar of the program.) We will associate the links to those coordinates.

Example of the necessary code for an image map

In the first place, the image that will act like a map and we must include a reference to this image in the usual way. You can do it easily in any program, even Composer or FrontPage. To activate the map behaviour, it is only necessary to add an extra tag within the same keys, ismap usemap="nombre_del_mapa". This indicates that the image will act like an image map. For example:

<img src="image-used-for-the-map.gif" width="720" height="528" ismap usemap="#map_principal">

To make further edition easier, you can cut and paste the map definition at the bottom of the page instead of letting it next to the markup for the image:

<map name="mapa_principal">
<area shape="rect" coords="503,15,583,50" href="guestbook.htm" alt="Section_1">
<area shape="rect" coords="571,90,653,130" href="features.htm" alt="Section_2">

</map>

You may have got the idea by now: as you see, the map has two tags: first, map, simply indicates to the navigating program that it behaves like a map, and its assigned name. The second label contains the coordinates of the active areas, and the link that corresponds to them (you should include an alternative name ALT, like in our example...) In this example there are two active rectangular areas, delimited by the coordinates that are specified after COORDS.

For circular active zones and polygonal ones, the process would be very similar. For the polygon, you have to include the coordinates of each corner point; for the circle, the coordinates of the point of origen and the radius. Let us see the respective examples:

<MAP NAME="Map_2"> <AREA SHAPE="polygon" COORDS="40, 15, 121, 40, 87, 140, 143, 125, 152, 191, 27, 208, 13, 117, 76, 97, 39, 42" href="guestbook.htm"> </MAP>



          <MAP NAME="Map_3">
          

          <AREA SHAPE="circle" COORDS="33,27,23" HREF="front.htm">
          

          </MAP>

          Tips and tricks

          Remember you can easily reuse image maps once you have created them. For example, you can change something in the image (for example, highlight a section) and still use exactly the same markup you created for the first instance of the map.

          
		  We have already mentioned that the image maps can save much effort at the time of remaking a Website.
In effect, if we based the navigation on image maps, it will be sufficient to change the image file to which the lins have been added to rejuvenate the look and feel of all and each one of the pages, with no need to touch a single line of code!
This approach was used in the catalan version of this manual. (the original, published in 1998.)

          To assign a different image for each section of the Web.
Unlike the previous trick, here what we will do is keep the definition of the image map constant and selectively change the image used for each section of the Website. You don’t even need to rename the image file in the map definition if each section of your website resides in a separate directory, because in this case you would simply upload a different image to each of these directories. A very simple trick and a powerful one: once defined the image map, for each of the sections we use a different image that it highlights the corresponding icon, while the rest appears blurred or dimmed. This idea works, it is extremely simple and it confers a detailed, professional look.

          		  
		  For the preparation of the images for projects like the one commented above, you will find very handy having some of the filters included with graphics programs. For example, starting off from a base image we can obtain diverse coloured variants, that correspond to the different sections from the Web.

          		  
You can also do sitewide changes in your image maps with the map itself. You can update all the image maps on a website modifying a single map definition file. It is enough to assign all the image maps to a single definition, located in a specific HTML file.
This ensures that further edition of the project will be as easy as possible. Even if with most programs you can easily perform sitewide searches and changes, this simple trick is even easier to do.

          In order to assign dynamic actions (like mouseovers) to an active zone of an image map it can be necessary to resort to a small trick, unless we use a very modern and powerful Web publishing program (for example, NetObjects Fusion or Dreamweaver 3+ assigns actions directly hotspots.) In older programs you would have to do the following: 

	  
		  
  We define the map of image with an image (A).
  We place the second image in its position (B), the one that is going to change when moving the mouse on a part of the map.
  We place an image any (C) elsewhere of the page and defined with it the action of change of image for B.
  We opene a window with HTML code and copied the code of this action that makes the change in B.
  We paste this code within the definition of the links of the image map that we want to use to trigger the action.
  Now we can safely erase image C (we used it only to prepare the script that we have just copied and pasted.)