Since, during the three-part series of "What is HTML?", I never really explained what the exact syntaxes were for each tag, or how to exactly structure the page, you can download my free e-book: HTML: A Basics Guide. It will give you a completely new understanding of HTML and will allow you to understand it better. It will explain the syntaxes much more deeply and how to use them in several situations. 

If you wish to download the Free e-book now, click here.

So, I've come back and written out this article, which thoroughly explains image mapping, its potential applications and how to create them using the HTML code. The "coords" attribute, is short for "coordinates" and implies that itself. In order to define a specific area on any image, or plane surface, we need a system by which the browser can recognize it. So, in this case, we're going to be using the basic Cartesian system of coordinates to define the area on the image. 

As I stated in the previous article: the "shape" attribute comes in 3 types in HTML. a) rectangle b) circle c) polygon. The most favorable shape that is used to define areas on a surface, is the rectangle. Circles can also be used, when we deal with buttons that around round. Polygons have much more wider applications because a much more specific form of the area can be obtained by using this shape. But, for some unknown reason, the "rectangle" is usually preferred over the others.

So, what we do is, we first decide which shape we need to use to define our image maps. After that, we have to decide the appropriate coordinates we will enter as the value to the "coords" attribute. Now, I know it is impossible to actually manually find out what coordinates the area belongs to relative to the image itself, but there is a great website, where you can actually upload your image, map it after choosing your shape, and then get the respective coordinates.

If you want to visit it, please click here.

Once you've got the coordinates for your shape, then you can create the "href" attribute, which will create the link that clicking on that area will take you to. 

So, for instance, if I have a picture of myself, and a great big RV next to me, and I especially love my RV. I want to advertise the shop that got me this wonderful RV, and I want to also share my Facebook profile page to all of my friends.

So, I have a crazy idea! I want to take that same picture, and change it somehow, so that whenever somebody clicks on the part of the image that contains me, it will directly take them to my Facebook profile page, whereas, if anyone clicks on the part of the image that contains just the RV, it will take them to the RV's seller's online website. 

So here, the use of image maps comes into play. So first, we'll insert he image using the <img> tag and the "src" attribute. Then, we'll create a title for it using the "title" attribute. Maybe we'll name it something like: Me & My RV! After that, we'll create a "usemap" attribute, and type in the image's identity. Then we'll open the <map> tag, and in the "name" attribute, we'll write in the identity we gave the image in the "usemap" attribute. Once we've don that, we'll open the <area> tag, and respectively fill out the details of each of these attributes for both the image maps: "shape", "coords", "href" and "title".

So here is how the code will look like: