How to Create Image Maps Using HTML
Image maps can be a very interesting and simple way of designing your web page. It’s an image where you can click on different areas which will link you to different pages or locations. For example you have a picture of a car. If you click the wheels you’ll be taken to the tires page of the website and if you click the windows, it will take you to the windows page. Let me teach you how to do it in html.
Before learning how to place it on your web page, you need to understand coordinates. You can use the picture I created for reference. Pictures are made of small dots which when combined together, will form an image. The image in my sample is 1024 pixels (dots) in width and 768 pixels in height. When you count from left to right, let’s call that X. And when you count from top to bottom, let’s call it Y. Starting from the top left corner, begin with 0,0. Check out the bottom left corner of the sample image. Its coordinates are 0,767. Since we didn’t move horizontally, X remained 0 but we went down 768 pixels that’s why it’s 767 (if you’re wondering why it’s 1 less, it’s because we started at 0 instead of 1).
Now you see that a single pixel has its own coordinates. Let’s say you have a square (see sample 2) inside your image and you need to know the coordinates of the top left corner, open your favorite graphics editing application such as Paint (included in Windows) or Photoshop or something similar. Put your mouse over the corner and you’ll see the coordinates. It should be shown at the bottom of the window (or somewhere else depending on the software you use) and you’ll notice that it will change when you move your mouse around.
With that in place, it will be much easier to teach you how to apply Image maps. As you may know, HTML (Hyper Text Markup Language) is used to create web pages and it uses tags. Here are the tags that you need for Image maps and how to use them.
*IMPORTANT* Please take note that due to formatting issues, I’ve placed the sample code in the first image for this article. Here are the explanations on the 4 lines of html image map code.
For the first line (see the first image for the code) change picture.gif to the file or URL (location) of the image and the usemap attribute will tell the browser that this picture will use the image map that you specify. In this case, it’s “shapes” and you can change it as you see fit.
On the second line, it gives your image map the name where you can reference your image to. This also signifies that from this tag until the closing map tag, it would contain the codes of the image map. Make sure also that it has the same name as the one you have on the first line.
The 3rd line on the sample code is where you specify where this area will link you when you click it and where the area is within the image. You need to specify the shape of the area and its coordinates. You can add as many areas as you need just make sure that they don’t overlap. Just remember that the area tags should be inside the map tags.
The 4th line on the sample code is the closing tag that notifies the browser that the image map ends here.
Now let’s move on. There are 3 shapes that you can use. The first is “rect”, short for rectangle, and the coordinates are arranged as x,y,x,y (as you can see in the example) where the first x,y is the top left corner of the area and the second x,y is the bottom right corner of the area.
Another shape is “circle”. The format is x,y,z (i.e. shape=”circle” coords=”15,15,20″) where x,y is the center dot of the circle and z is the radius of the circle. If you remember in geometry, the radius is the distance from the center point to any point on the circle. It’s half the diameter.
The next shape is “poly” or polygon. Let’s say you want to use the shape of a pentagon (or an irregularly shaped polygon). All you have to do is to specify the coordinates of the corners (it should be in clockwise or counter clockwise order). In this case, you need 5 coordinates for the pentagon so the coords will look like “x,y,x,y,x,y,x,y,x,y”.
The main advantage of using Image maps is to drastically lessen the need to layout your webpage. Let’s say you have 10 buttons. Lining them up using html or css codes could be time consuming. But if you use an image map where you can place all 10 buttons, you’d only need to check the coordinates and enter a few lines of html tags. Arranging them manually may take an hour or so but with Image maps; it’ll take a few minutes. Plus, what you see is what you get. The layout of the picture is the actual picture that you’ll see on the page. It is very useful in creating maps! (i.e. World Map)
The disadvantage, however, is that you will have difficulty in modifying it. If you need to add a button after a few weeks, you need to create a new image and you have to analyze the coordinates again. If you need to change something within the image, you have to modify the image itself and possibly re-do the html code again.
It’s not that really hard to use once you get used to it. But I would suggest that you use it only if you need to or if you really want to have that element on your web page. That would really depend on whichever works for you. Have fun designing your web page!