Notice the date on which it was written. Ancient, huh? And yes, we did write the markup in CAPS back then.

HTML Image Maps Tutorial for Beginners
Written on Tue, 30 Dec 1997 01:55:49

When we use image maps, we are essentially defining areas of a picture as “hotspots” and the action to take when that “hotspot” is activated.

Let’s take an example. A car. You want it to be that when you click on the glass, it takes you to the page giving finer details of glass and when you click on the rest of the body, it takes you to finer details of how the car was painted. For this, we are going to “map” the image to different “HREF” links. How?

The standard, minimum recommended image tag is:

When we want the image to use a map, we add a "usemap" attribute. So, the image tag becomes:
<IMG SRC="car.jpg" ALT="A car" WIDTH=100 HEIGHT=50 usemap="name">

Now, we are telling the image to use a map. But where is the map? We have to define it first. How do we do it? We use the <MAP> tag. We also have to give it a name which we will specify in the “usemap” attribute. Let’s see what I mean:

<MAP NAME="CAR">
</MAP>

So, the image tag will be:
<IMG SRC="car.jpg" ALT="A car" WIDTH=100 HEIGHT=50 usemap="#car">

As you might know, we use the “#” to tell the browser that the what we just referenced to exists in the same HTML document somewhere (usually people put the maps near the end of the document). So, it turns out that we use the “name” attribute in the “MAP” tag to bookmark the map and we can put a reference to this bookmark just as we would to any other standard <A NAME=”name”> bookmark in a HTML file. Notice something? The procedure remains the same. Only, since the content of the bookmark are mapping directions, we use <MAP> & </MAP> instead of the usual <A> & </A>. Easy till now? It gets simpler.

So now we know how to set a bookmark to mapping directions and we know how to call it for an image. Now we see how to “program” these directions for an image. Fine?

What comes between the <MAP NAME=”name”> & </MAP>? There is only one thing that can be used here – the <AREA> tag which defines areas on the image which refers to the map. Then we tell it which shape to use and what the coordinates,etc are for that shape. Then we specify what action to take. If no action is given, no action will be taken as a default. See? It’s simple.

Now you know it as well as I do that we can specify parts of an image like that only by addressing actual pixel values of the image. Let’s use our example here.

Remember the car image above? Its width is 100 pixels and height is 50 pixels. Let’s define two equal vertical bands. We do it by defining two rectangles using the “RECT” shape. The “COORDS” attribute is specified as left-x,top-y,right-x,down-y. Here is the map. See for yourself:

<MAP NAME="car">
  <AREA SHAPE="RECT" COORDS="1,1,50,50" HREF="front.html">
  <AREA SHAPE="RECT" COORDS="51,1,100,50" HREF="back.html">
</MAP>

Get it upto here? Let’s do it across now:

<MAP NAME="car">
  <AREA SHAPE="RECT" COORDS="1,1,100,25" HREF="top.html">
  <AREA SHAPE="RECT" COORDS="1,26,100,50" HREF="bottom.html">
</MAP>

<MAP NAME="sample">
  ...
  <AREA SHAPE="CIRCLE" COORDS="10,10,10" HREF="abc.html">
  ...
</MAP>

But what if you don’t want a rectangle or a circle but a triangle? To overcome this, the shape tag of “POLY” is used. It’s COORDS use pairs of x-y positions to form any shape you want.

For example, to make a diamond in our car and then to make is clickable, we use the map:

<MAP NAME="car">
  <AREA SHAPE="POLY" COORDS="50,1,1,25,50,50,100,25" HREF="abc.html">
</MAP>

The first pair, “50,1″ means: 50 to the left (middle of the image) and pixel line 1 (the top of the image). The second pair, “1,25″ means: 1 to the right (the extreme left of image) and 25 down (the middle of the image). And so on…

And if two areas overlap, the first defined takes preference. For example, if we were to make the flag of Japan clickable, we could use a map like this:

<MAP NAME="JAPAN">
  <AREA SHAPE="CIRCLE" COORDS="50,25,20" HREF="red.html">
  <AREA SHAPE="RECT" COORDS="1,1,100,50" HREF="white.html">
</MAP>

Since we defined the circle first, on clicking that area, the action it specifies is taken.

Have fun!

A little over a couple of years ago, I was using a spreadsheet to track the work assignments to my team. It was cumbersome: others couldn’t see how I had assigned the work, when I was expecting what from whom, what the priorities were, and at times when the work load was high even exactly what was needed to be delivered.

With Deepak helping me out whenever I truly got stuck I wrote a basic application that all my team members could access. It had different user levels so that only I could assign work and a few other little bits that were non-standard back then. Since the application was running on a local server, load times were instantaneous and I didn’t have to worry about a lot of things. I did it over a few nights (totalling two working days I believe). Over the next few days after I let my team on it, I kept making small changes to help make things clear so that I would not have to provide information that I could put beforehand in the work list.

Then I stopped.

There weren’t many CF coders in our office so when I wanted some advanced stuff added, I had to get it re-done in PHP. Since the benefits of the application were very visible, I got the developer time easily. A few other teams tried it out to see if they could manage their work with it too. That was flattering.

Anyhow, back to topic.

Our time tracking system is written in CFML/MSSQL and hasn’t really seen many updates recently. The reports generated are no longer suited to our current needs. Though we are able to take things forward this way or that way since the data is there, it’s a pretty time-consuming way to do things.

Therefore, last two days I have been working on learning SQL and trying to remember the basics of CFML. And just as last time, at the end of second day, I have my first report ready.

It is still as fun as it was last time.