Making <img> Interactive WITHOUT CSS and JS

Note: This article also exists in video form

I recently completed a project where the user could get more information about a models outfit by clicking on the parts of the image they were interested in buying.

How would you approach this?
Maybe use transparent anchor tags which send the user to the item of interest? While this could work, although it can get very messy really quickly, you would only be able to make rectangles clickable, no custom shapes or even circles.
So maybe not the best solution.

Introducing the <area> tag.

Enclosed in a <map> tag, you can define parts of the image to be interactive.

The area tag supports all global and event attributes so it can be linked to javascript functions like a charm. Or you can add an href and use it like a link.

We define the position of the area with coordinates, that’s also why we need to wrap it in a <map> tag because this specifies an image-map.

Let’s see a simple demo:

to give you a better understanding of what is possible

Let’s start coding:

First we add an image with a fixed size. Note that the map is not resizable that’s why the fixed size is important right now or else when resizing the window the areas would stay exactly the same.

Right after the image we create an image-map (via <map></map>). Since the browser also wants to know which image corresponds to which map we have to establish a distinguishable connection between them. This we will do by giving the map a name-attribute and adding it to the image element via the usemap-attribute. Note that we must write a #(hashtag) before the name value of the map although it isn’t an id. This can be a bit confusing but, without it, it simply doesn’t work.

And finally we can add an <area> inside the map. There are three mandatory attributes we still have to provide.

First of all, the alternate text or in other words the alt attribute. However, this is only required if you want to use the <area> in combination with the href-attribute.

Then we need to determine the shape of our area. We can choose from three different shapes: rect for rectangle, circle and poly for polygon.

Based on this decision it depends what value we have to assign to the third and last required attribute: the coordinates. Without them the browser does not know where to put the area. For a circle we have to supply three numbers: the x, y and the radius. For a rectangle we need four numbers the coordinates of the start point and of the end point.

You probably wonder how you can determine these coordinates. Luckily in the Firefox developer tools there is this handy ruler icon which tells us the global coordinates of the page, so no guesswork is required. Unfortunately, for chrome there is no such tool as far as I’m aware of, but feel free to write a comment if this has changed.

You also can add a href to the area which takes the user directly to the url when she or he clicks on it.

Now lets roughly outline the shape of the model… and e viola!

the finished source code (that’s all there is to it)

That’s all there is to it! I hope you have learned something new today.

Clap, subscribe and comment your use case of the area element.

Or watch the article in video form: