Image Map Tutorial

Now If you're here you're either wondering how to make an imagemap, or you're simply wondering what an Image map is, well in this tutorial you'll learn both!

An Image map is a section of coding that can be used to seperate and link different parts of an Image, for example this site's splash image is an image map, seperated into two sections and linked to the Main Site and Forums. This image map uses polygon links, as the link areas are set to two different polygons, other types of map areas include, rectangles, points and circles.

How can I make an Image Map?

To make an Image map first you need an Image, for this tutorial I will be using the Splash Image as the example.

First of all you need find the coordinates that you want for your image map, open your image in an image editor such as Photoshop or Paint, believe it or not Paint is the better program for finding coordinates, and I highly suggest using Paint. If you'd rather it done in Photoshop click here to be taken down to the photoshop tutorial

To begin with, open your image in paint.

As shown above as you hover over a point the coordinates will be shown in the point bordered in red. Now you have to decide what shape you want your links to be, a rectangle, polygon, circle or point. This tutorial focuses solely on polygon links.

This blue shows where I want the link for the main site to be and the orange shows where I want the link for the forums to be. So now I place my cursor over the corners for the image and jot down the points.

Now that I know all my points it's time to get to the coding. Click here to skip the Photoshop Tutorial.

For those of you who'd rather find the coordinates the photoshop way, here it is. Firstly open your image in Photoshop, next if you do not already see the ruler click on View then Ruler.

When hovering over a spot the a black dotted line (shown as a solid red line for clarity) will appear up both rulers showing the approximate coordinates, unfortunately you have to figure them out for yourself. (If you want to find the last point just check the dimensions of the image, as that will give you an accurate reading). Now you have to determine what shape you want your link areas to be rectangles, polygons, circles or points. As the splash shown uses Polygonal links I will continue this tutorial with polygons. Once you've done that imagine where you want the corners for the shape are.

The Blue shows the area I want to link to the main site and the orange shows the area I want to link to the Forums. Now hover over each point where a corner of your area will be, estimate the coordinates using the ruler, and write them down.

And there are you're points, now the most important part, the coding.

The Coding

The coding for an image map is simple, but can get confusing if you don't do it properly. First of all we need to open the code to specify that this is a map.

Just place the maps name where 'splash' is, any name will do. For the next part of the code, we have to specify the shape we want the area to be and where it is

'poly' refers the shape of the area, the url is the of course the link for the area to redirect to, the numbers are of course the coordinates, now the coordinates can go in any order but it is better to keep it in a cyclic order so that you know which shape it is, '0,0' is the top left corner, '400,0' is the top right corner and so on and so forth and the title is of course what is seen when you hover over the area for a few seconds. Now you can insert as many link areas as you'd like as long as they do not overlap. Now after inserting the code for the forums area, and closing the 'map' tag the code looks like this:

This code can go in the head or body, it doesn't matter where. As long as it's on the same page (or in some cases the include file). Now that we've set up the map we need to show it.

The '#splash' is simply the name for the map that you stated at the start of the code, and the 'splash.png' is of course the source for the image your are using. And there you have it your own image map, ready to link wherever you want it to.

The areas of an image map do not need to take up all the space of the image, if you just want a small area simply specify the coordinates to use.

• Rectangle - To make a Rectangle area simple replace 'poly' with 'rect' and specify the two opposing corner coordinates (so for the first half of the above splash image 0,0 and 400,250)
• Circle - To make a cirlce link area replace 'poly' with 'circle', specify the coordinate for the origin (center) and, after a space, how long the radius of the circle is in pixels.
• Point - The simplest and least used, replace 'poly' with 'point' and specify the coordinates for the one pixel in general, this will ONLY make one pixel a hyperlink.

I hope this tutorial helped you, no credit is needed, though if somebody asks you how to make an image map, refer them back to us.

Tutorial by Deathseeker
Originally learnt from Kasparius Tutorials