Create a reactive zone (image map) with CSS

Introduction

Let's understand each other: as usual, I don't invent anything, I only write about things I find here and there on the web.

So, I'll take the risk to disappoint you, I have to admit that there is nothing of my invention here. It is only a translation and a simplification of a method I found in A List Apart [en]

Create image maps (clickable images) is generally not easy since you have to calculate the coordinates for each of the four corners of each map. Generally, it is a lot of lost time if you don't have an appropriate wysiwyg software to calculate it all for you.

Another inconvenient of classic image maps is that the code for them is very often too long, heavy and most of the time incomprehensible, if not invalid or non-accessible!

The above mentioned website , A List Apart, proposes an elegant CSS solution [en] by making use of the link tag <a>to which you give a dimension and a position over the background image.

Realisation

<a> is an inline tag [en]. You can't assign a dimension to it.

It needs to be converted in block to go around that. There are only two possibilities to do that: display: block on the link (in this case, the image will need to be positionned) or float: left on the link, that will transform it in a block (that's the solution I went with).

Then you'll have to give the chosen dimensions to your zone (width and height) and place it where you want it (by using margins for examle.

Here is an example: the clickable zone will be 150px by 100px and placed at 20 px from the left side of the image and 30px from the top of the image.

HTML code:
<div id="image">
	<a id="zone1" href="#" title="click"></a>
</div>

CSS code:
#image {    /* background image block */
width : 500px;
height: 500px;
background: url(image.png) top left no-repeat;
}
#zone1 {    /* clickable area */
float: left;
width : 150px;
height: 100px;
margin-left: 20px;
margin-top: 30px;
}

You can view the result here.

Here is a variation.

Of course, you can place several reactive zones on the same background image.

However, be careful if you want to place two block tags (zones) side by side, you will need to think about floating positionning (float) in absolute or relative since the block tags go to the line by default. In our case, the link is floating so you can place several side by side.

Print article

Raphaël GOETTER
www.alsacreations.com