Image Mapping with CSS

Image Mapping – This tutorial will show you the benefits of image mapping and why you should implement it when building websites. I will take you through the how and why, plus show you image mapping in action. This image mapping tutorial is aimed at beginners and will only require you to know the basics of HTML and CSS.

To see the image mapping demo in action click here

Why Use an Image Map?

Consider the following image. Notice that it is in fact 2 images which have been placed in the same file. This can be achieved using most good imaging software such as Photoshop.

There are two main benefits to image mapping. The first being cleaner code, something which all web designers should aspire to achieve, the second is image mappings unique ability to overcome the issues thrown up by button states.

When using rollover images you will need to download more than just 1 image, you will also need to display this when the image state changes, meaning that your browser will need to render the second downloaded image, thus the rollover will not be as smooth the first time it is displayed. Using an image map stops this problem altogether, because when the original image is downloaded so is the second. There is no lag, it’s as simple as that.

How to Use an Image Map

Let’s consider that I want to want to use the icon above as a rollover image. This will have two states: greyed when the page initially loads; then coloured when the user hovers over it. To do this we will need to use some simple CSS styling, the code will want to look something like this.

body{
font-size: 12pt;
font-family: Arial;
}
#links {
padding:10px;
}
a.bookmark {
background: url('/images/delicious.gif') left no-repeat;
background-position: 0px -17px;
text-decoration: none;
pointer:cursor;
padding-left: 18px;
margin-left:5px;
}
a.bookmark:hover {
background: url('images/delicious.gif') left no-repeat;
background-position: 0px 1px;
text-decoration: none;
padding-left: 18px;
margin-left:5px;
pointer:cursor;
}


As you can see the same image is being applied to both the style states, all we are doing to change the state is modifying the background-position, so when the user hovers over the link the state changes, but all that’s actually changing is the position of the background image on the page. The real beauty of this is the small amount of actual html you require on the page, once you have done this. For our example the actual HTML looks like this.

<a class="bookmark" href="#">Delicious</a>


That’s all there is to it. With just a small amount of CSS and even smaller amount of HTML, we can create a very quick and powerful way to rollover images. To see the demo in action click here.