NWE Help: Graphics: Tips: Image Maps

NWE Home :: Help :: Graphics :: Tips

Imagemaps allow you to create geometric shapes in images that contain multiple hyperlinks. The viewer of your page can click on a part of the image and be taken to whatever hyperlink you have designated for that section of the image. Imagemaps function by coordinates. Where your hyperlink goes depends on the coordinates of the image selection. The coordinates are based on a grid of the image that we will show you how to find.

The most common form of imagemaps are called client-side imagemaps because they depend on your web browser to function. This page will show you how to set up a client-side imagemap.

We don't currently have any imagemapping programs in the NWE. If you want a good shareware program, you might want to consider Mapedit. Below are instructions for making an imagemap in the NWE without the program. We recommend, however, that you use an imagemap program for ease because mapping coordinates can be difficult.

First, select an image you want to work with. Let's use the NWE logo that looks like this -- it's called 'nwelogo.gif'. We're going to make the words "writing" and "environment link to different sites. Here's the image without the image map:

Second, add a USEMAP attribute to the image in your source code. You need to give the map a name (it's best to use the same name as the image) and precede the name with a # (pound sign):

     <IMG SRC="image.gif" USEMAP="#nwelogoareas" border="0">

Now, in front of the IMG tag we'll add a MAP tag and some AREA tags. Step three: let's identify the map with the map name you put in the USEMAP tag. Make sure that the text in the quotes after the USEMAP attribute and the NAME attribute are exactly the same -- these attributes are case sensitive!

     <MAP NAME="nwelogoareas">

Now we'll determine the shapes and coordinates. Shapes can be rectangle (RECT), circle (CIRCLE), or polygon (POLY). For home grown image maps like these, we recommend using only rectangles (RECT).

For rectangles, coordinates work like this: the first set is the upper left, the place in the image map where the shape begins (x, y). The second is the lower right, the location where the shape ends (also x,y). So, coordinates are four numbers in a row.

To determine the coordinates in an image -- the place where you want someone to click on, open the xv image viewer. Load an image. Click on the image with the middle button of the mouse. You'll see on the image the coordinates of where your cursor is placed.

The tag for the shape and coordinates goes after the name tag. Let's use a rectangular shape for the map:

     <AREA SHAPE="rect" COORDS="86,35,290,63" HREF="http://web.nwe.ufl.edu/writing/">

This states that the shape of the map area will be a rectangle, the coordinates will be "86,35,290,63" (the two coordinates which surround the word 'writing' as located in xv), and the link will be to http://web.nwe.ufl.edu/writing/. When someone clicks on this section of the imagemap, s/he will be taken to that URL -- in this case the NWE homepage.

The final code will look like this:

     <MAP NAME="nwelogoareas">
       <AREA SHAPE="rect" COORDS="86,35,290,63" HREF="http://web.nwe.ufl.edu/writing/">
       <AREA SHAPE="rect" COORDS="44,68,360,94" HREF="http://sierraclub.org/">
     </MAP>

You can have more than one set of coordinates. Simply repeat the <AREA shape> tag with different coordinates and a different link.

And this is what the image would look like with two mapped areas. The word 'writing' links to the NWE homepage. The word 'environment' links to the Sierra Club homepage.