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!

• LinkedIn: It’s perhaps the only serious social network for professionals.
• Orkut: It’s very popular in India and almost everybody I know outside work is on there.
• Facebook: I have only recently started taking it seriously. However, it’s a good ‘missing-link’ between a ‘meant-for-professionals’ LinkedIn and totally-bindass Orkut.

Aside: I have also started Tweeting. Follow me.

Best of luck guys!

• Computers
• Internet
• Music

How many people get a chance to do what they want to do, their hobby being their job, and their passion for something getting a chance to become something real & practical? Not many. I’m one of the luckier few.

I can’t talk about it right now but trust me, I’m really excited right now with the possibilities of what I’ve managed to get involved with! Watch this space for some info.

• Google made a stupid mistake
• Eric Schmidt is a moron
• GoogTube
• et al.

What I find particularly missing are two core facts:

1. Google’s total IQ is probably more than the GDP of some countries (it’s not my line, I read it somewhere ages ago). They don’t make stupid mistakes.
2. Yahoo has been on a roll recently with some very cool, strategic buys that are pushing them hard into a challenging position and they have been making some very bold decisions to get there (eg: making yahoo mail source open).

So I ask, is this $1.65 billion purchase of YouTube more a stupid mistake by those who can do no wrong or a very capable strategic decision for a cash-rich company to deny one of its biggest rivals a fast-track into the competitive online video arena?

All hostels in Panjab University, Chandigarh are disallowing independent access to the Net to residents, irrespective of their departments or level of education, because they are “not mature enough to access the Internet”. These pearls of wisdom belong to none other than the Dean, Student Welfare, Prof. Nirmal Singh, who opines that, “All they do is open bad sites.”

It makes me wonder if those in power to take such decisions and have them implemented are really so clueless, or is doing so more like an ego-trip for them, since whatever be the reason, in the end, only the end-user suffers and the organisation’s image (whether it be a University or a country) that takes a hit.

TinyDisk is a program from saving and retrieving files from TinyURL and TinyURL-like services such as Nanourl. It overlays a write-once-read-many anonymous, persistent and globally shared filesystem. Once something is uploaded, only the database admin can delete it. Everyone can read it. No one can know who created it. Think of it as a magical CD-R that gets burned and placed on a network.

Yeah, I know it’s not very useful in practical sense but as a concept, it’s a great example of out-of-the-box-thinking.

His latest Alertbox column titled “Weblog Usability: The Top Ten Design Mistakes” surprised me by its appearance; wasn’t expecting him to write on the subject this early. The introduction at the top really does make sense and clearly shows he understands the unique nature of blogs.

When I started reading the list of mistakes, I started nodding my head.

1. No Author Biographies: Okay, I’m guilty of this and i’m going to correct this immediately. My About page has needed the edit for a long time anyway.
2. No Author Photo: Guilty again but I don’t think this is going to change for me.
3. Nondescript Posting Titles: Not guilty.
4. Links Don’t Say Where They Go: Not guilty (mostly). However, though I agree that such links do indeed bring the usability of the blog down, it is usually taken for granted by the users. They want the commentary and not names to links and where they encounter strange blogs and do not trust the author, they indeed do take the necessary care before clicking.
5. Classic Hits are Buried: Partially guilty of this but largely due to the fact that I don’t know WordPress hacking yet.
6. The Calendar is the Only Navigation: Agree. WordPress provides categories though and therefore, not guilty.
7. Irregular Publishing Frequency: Very guilty. However, this is a slightly borderline thing. I don’t think that the publishing frequency is such a big usability issue. In a way, if you think about it, it does bring the overall usability down of a blog but is it so much that it be listed as Mistake #6 in Weblog Usability Designs Mistakes list? I disagree. BTW, is it even a design issue?
8. Mixing Topics: This is something that is slightly controversial. Perhaps partially true for a narrow segment, mixing topics is not really such a big usability issue with blogs. They are supposed to mix topics unless they’re subject-specific blogs. Most people who post different subjects on such blogs do it very intentionally and fully knowing that it’s going to be for the better of their blog and themselves. In a way, this is not much of a usability issue either, especially in light of the discussion in #6—the Categories feature that is in use in almost all blogs now very efficiently takes care of this issue.

But IMHO, #9 (Forgetting That You Write for Your Future Boss) and #10 (Having a Domain Name Owned by a Weblog Service) are nothing but pure advice on content. Whether or not somebody will be able to attribute a certain piece of information to me decades after I’ve written has nothing to do with the usability of my blog. Similarly, having a certain provider’s name in the URL of my blog has no effect either and is purely a non-affecting cosmetic that, if it makes a difference, does so only because of a psychological bias in the user’s mind.

This article is going to get a lot of press in the Blogosphere (heh) and I’m looking forward to reading other people’s opinions and rants.