Image Maps

I'm sure a lot of you are most probably asking, "What the heck is an Image Map?". Well, an image map is a simple alternative to slices or making multiple images, allowing you to add links to individual regions of an image with nothing but HTML coding.

The Code

This is the code we will be working with for this tutorial. In the later sections, we will explore the details of this code. There are several variables to this code, so we will take it step by step as it is easy to get a little confused.

Here is the output that this code generates.

Note how you can click the icons of the programs to go to the corresponding tutorial section of Tutorialfx.

Coordinates

Ok, before we actually do anything with the code, we need to find a few things. Notice in the code the 'coords' variable? This is where we need to tell it what part of the image is to be linked, using X and Y coordinates. In order to do this, we will use the convenience of Adobe Photoshop.

Open your image in Photoshop.

Now open up your Info Palette.

Now that you have the Info palette open, simply place your cursor over the described places:

For a Rectangle:

Place your cursor over the Top-Left Corner of the region that you want the link to start. Look on the Info palette and record the X and Y coordinates of the cursor.

Now, place your cursor at the Bottom-Right Corner of the region. Record the X and Y coordinates of the cursor.

For a Circle:

Place your cursor over the Middle of the region. One trick I use to find the exact center is to select the area with the Elliptical Marquee Tool, then Free Transform, and place my cursor over the center alignment, then press Escape.

Record the X and Y coordinates of the cursor.

Now take the Measure Tool and measure the distance between the center of the circle, and the edge of the circle.

Now record the distance, as shown in the Info palette.

For an Irregular Polygon:

Place your cursor over the Top-Left Corner of the region. Record your X and Y coordinates. Now, place your cursor on the next point of the irregular shape, and record the coordinates. Work around the shape in a Clockwise direction.

As a final note, if an area overlaps, the browser will make the overlap linked with the area that is listed first. So, for example, the Dreamweaver and Internet Explorer areas overlap. Because the Internet Explorer region is listed in the HTML document first, this area will be linked as this region.

Image map Code Set-up

Ok, now that we have recorded all of our X and Y coordinates, we can start to pick apart some of the code.

In an HTML document, you can use as many image maps as you like. This is why it is also important for to add the id and name attributes.

You can also use as many regions in an image map as you wish.

To start an image map, simply use the <map starting tag. Now, we will add an id and a name to our map. Note that we will use both the id and name attributes, as some browsers recognize one, while other browsers will recognize the other.

Add a space, then add the id="" attribute, adding the id of your map in between the quotes. You can name it anything you want.

Add a space, then add the name="" attribute, adding the name of your map in between the quotes. Make the name the exact same as the id.

Add a closing greater-than sign. >

Now we have the beginning image map tag, lets start to add our regions.

Type the beginning <area tag.

Now add a space, then add the shape="" attribute, adding the shape of the region in between the quotes. You can choose between rect for a Rectangle, circle for a Circle, and poly for an Irregular Polygon.

Add a space, then add the coords="x1,y1,x2,y2" attribute.

For a Rectangle:

x1 and y1 are the X and Y coordinates of the Top-Left Corner, and x2 and y2 are the X and Y coordinates of the Bottom-Right Corner.

For a Circle:

x1 and y1 are the X and Y coordinates of the Center of the circle, and x2 will actually be our Radius of the circle. The y2 will not apply for this shape.

For an Irregular Polygon:

This is the same as the Rectangle coordinates, only you will be entering your coordinates in a Clockwise direction, marking the X and Y coordinates of each point. You may end up with many x and y areas depending on how many points you have.

Make sure you have all the coordinates between the quotations, and a comma between each coordinate. There are no spaces within this attribute.

The alt="" will simply be our name tag for the region. So in between the quotes, you can place the name of this region, for an example, where the link will lead to. This will only appear as a title if the user hovers their mouse over the region.

Now, add a space, then the href="" attribute. This is where we will place our link that this region will take us to if clicked on. Make sure to type the url correctly. I would advise using absolute urls for anything HTML, as it guarantees the browser will never misinterpret the url. For those who do not know what I mean, basically absolute url is the exact url, with all the http://www. such.

Also, as another option, to make the region have no link, you can simply put nohref="nohref". This may be useful if you want all but one certain region of an image to be linked.

Now, you can close the area tag with a space, then the ending />.

Remember you can apply as many of these regions on the map as you want.

Now, to finish the map code, simply add the closing </map> tag.

Applying the Image map to an Image

Now that we have our map established, we need to tell the image to use it.

Set-up your image code as you usually would.

Now we need to include a special attribute called the usemap attribute. Inside the img element, add the usemap="" attribute. In between the quotes, we will place the name/id of the image map. Also, there is one important thing we need. You MUST include a hash sign just before the map name, inside the quotations. This is a hash. #

Remember to include a space between each attribute!

So, now our code will look like this.

You can place the img element before or after the map, it doesn't really matter.

And this is what our completed code generates.