Home > Computer & I'net > Image Maps...

Browse by title articles:

What is hot:

Image Maps

COLGROUP & COL

	Top 10 Biggest Mistakes of Website Design
	PHP Templates
	Storage and re-use of images using PHP/GD - Part II
	Page Length - How long is too long?

Image Maps

Image Maps

by David Stanley

There are some programs that make it very easy to create images maps. You can find many through a download site such as Tucows or Downloads.com. Other than that, you can use an image editing program such as PaintshopPro and this tutorial page.

We also offer a "fake" image map tutorial. This shows how to put separate linked images into place, thus creating a similar affect of a real image map.

An image map is a single image with link areas. The link areas (also known as hotspots) link to different areas, pages, or sites like any regular link. Each hotspot can be assigned a different destination.

A hotspot of an image map can be 1 of 4 different shapes. Circle, Rectangle, Polygon, and Default. With each shape, a set of co-ordinates are needed. The shapes and co-ordinates are invisible. They will not actually be seen on the image itself. They create references. The examples shown in this tutorial are shaded to visually see what is happening.

Co-ordinates are the numbers that represent exactly where a point is on the image. If you take a look at a road map, you will see the grid all through it sectioning it into squares. Or how about the game of BattleShip? Those are all co-ordinates. See, you know all about co-ordinates already and weren't aware of it! Here are the co-ordinates needed to specify the different shapes of an image map:

Circle	X, Y, Radius
Rectangle	X, Y, X, Y
Polygon	X, Y, X, Y, X, Y, etc...
Default	Anything left over.

The X co-ordinates are the pixel count from the left border of the image.
The Y co-ordinates are the pixel count from the top border of the image.

The hotspot is called an AREA. Each AREA consists of a SHAPE, COORDINATES, and an HREF. The HREF acts just like a regular link for when the visitor clicks on the AREA.

For this tutorial, the examples will be shown using my horribly drawn house scene :

Cute isn't it? Yeah, I know it's bad, but it will help explain image mapping. This image happens to be 200 pixels wide and 175 pixels heigh in size.

CIRCLE
The circle co-ordinates are X,Y, and RADIUS. The main point we have to find is the center of the circle.
X is the number of pixels from the left image border to the center point of the circle.
Y is the number of pixels from the top image border to the center point of the circle.
RADIUS is the number of pixels it takes to get from the center point to the edge of the circle.

So, the sun is going to become the hotspot for this example. By opening my image in an image editor, I found that the center of the sun circle is located about 42x42. The radius is about 30 pixels. The full co-ordinates for this AREA are 42,42,30. To put that into coding it would look like :

RECTANGLE
The rectangle co-ordinates are X,Y,X,Y. The top left corner and the bottom right corner of the rectangle are the points specified. The other 2 points of the rectangle will automatically be calculated.

This is probably the most common shape used. The main house area is the hotspot this time. Opening the image in an image editor, I found the top left point is at 82x99 and the bottom right point is at 143x157. The full co-ordinates for this AREA are 82,99,143,157. To put that into coding it would look like :

POLYGON
The polygon is a very complex shape. This option uses corner points like the rectangle, but it declares ALL of the corner points. This makes it possible to have multiple points and edges. As the points increase, the length of co-ordinate number pairs also increases. For the purposes of an easy example, I will show a 3 point shape. The co-ordinates for a polygon are specified starting at the bottom left position moves clock-wise.

The roof is going to be the hotspot. Opening the image in an image editor, the bottom left corner is at 83x99, the top is at 109x64, and the last corner is at 139x99. Putting them all together you get 83,99,109,64,139,99. Putting that into coding would look like :

DEFAULT
The default is more of a "non-shape" than a shape. It covers all the area left over that hasn't been assigned by a regular shape (above). Since it covers all of the extra space, there are no solid co-ordinates to assign to it. Setting the default to NOHREF will make the space non-active. Or, it can have an HREF assigned to it so the visitor will be linked to another page when they click on it.

You are now half ready to create an image map! All you need now is a bit more HTML coding to put it all together. Here is the basic outline of an image map with 3 hot spots and the rest of the image as non-active. Like all other images, this code will go into the BODY area of your coding.

The hotspots are contained in a MAP tag set. The MAP tag is used to assign a to this group for referencing. In the IMG tag, the USEMAP property is added to reference the image map. The # in the USEMAP means to "reference" the MAP co-ordinates in the grouping (in this case) called MyMap.

QUESTION : What if you have made two shapes that overlap? Where does the visitor get linked to when they click on the overlapped area?

ANSWER : The overlapped area will link the visitor to the first declared shape in the code.