What is an Image Map

In HTML and XHTML, an image map is a list of coordinates relating to an area of a specific image, created in order to hyperlink that areas to various destinations (as opposed to a normal image link, in which the entire area of the image links to a single destination).

You can see a demonstration of one below. Just move your mouse over the darker of the two balloons.

Image Map Demo


It looks cool but what are the issues?

Image Mapping has been around for quite a while now and even works in browsers as old as IE6. However, it has gone out of fashion lately. I guess the main reasons for this are accessibility, processing power and complexity.

I would never recommend using this technique as the main form of navigation on your site. Neither search engines nor screen readers can see an image map. So it is always a good idea to include the link inside an anchor tag somewhere else on the page as well. Also it can be hard for the user to spot an image map link. How would you know that the dark balloon in the demo is a link? So you need to try and make it easy for the user to understand what to move their mouse over. At the very least create some kind of reaction. So when the user moves their mouse over the mapped area they know that they are meant to do something. In the case of the demo I created a hover, you could also use an alert or anything else you can think of.

Traditionally an Image Map uses a lot of computing power. Firstly you tend to use larger images, which take longer to load, and then your computer has got to interpret all the coordinates that you have entered. The more coordinates you have the slow the webpage becomes. Having said that computers are a lot fast then they use to be, internet connections are much faster and so are modern browsers. I would say that the demo I created is on the heavy side so you can see how well your computer handles it.

As for the complexity of creating an image map, there are a number of free online tools to help you. I used Poor Person’s Image Mapper, there are more advanced ones available.

In conclusion, don’t discount Image Maps, especially as web design is moving more towards geometrical shapes. It’s probably a lot cleaner and quicker than using flash to do the same.

Are you still up for creating an Image Map? Then here’s how.

In the demo I’m using two Images absolutely positioned inside a relatively positioned div. One is the base image and the other is the hover image.

Here is the HTML:

<div id="demo">
<img usemap="#balloon" src="http://www.mysite.com/path/balloons.jpg" title="balloons" width="595" height="407" />
<img usemap="#balloon" class="balloonHover hidden" src="http://www.mysite.com/path/balloonsHover.jpg" title="balloonsHover" width="595" height="407" />
</div>

And here is the CSS:

.hidden{
   display:none;
}

#demo{
   border: 1px solid #CCCCCC;
   margin: 0 auto 10px;
   position: relative;
   width: 595px;
   height: 407px;
}

.balloonHover{
   position:absolute;
   top:0;
}

Note that the <img> has an attribute called usemap, the value of this relates to the id of to your image map.

Now we have the basic HTML and CSS, which we’ve also used to hide the hover image, we can start creating our map. To do this we are going to need a little more HTML, <map> and <area>. <map> has two attributes, name and id, these relate to the usemap attribute in the <img>. The <map> use to only have the name attribute but in later versions of HTML it is being superseded by the id attribute so it is a good idea to have both.

Inside the <map> is <area>, this is what we use to map and link an area of an image. It needs three attribute, shape, cords and href. There are three shapes to choose from square, circle and if your shape is neither of these then use polygon. Next is the coords which is just a list of coordinates separated by a comma. To get your coordinates simply upload your image to a free online image mapping tool like Poor Person’s Image Mapper and use your mouse to plot a path around part of your image. Then just copy and paste the coordinates into your HTML. Then finally put the link destination in the href.

That’s it you have created an image map. Here is what mine looks like, don’t be phased by the number of coordinates:

<map name="balloon" id="balloon">
   <area class="myClass" shape="polygon" coords=" 355, 140, 345, 180, 338, 205, 324, 232, 298, 262, 324, 292, 367, 326, 377, 338, 382, 340, 397, 343, 412, 341, 420, 337, 432, 321, 480, 275, 507, 230, 518, 197, 518, 167, 508, 142, 499, 124, 478, 105, 466, 96, 443, 89, 434, 84, 413, 84, 400, 79, 383, 82, 369, 82, 357, 87, 344, 88, 338, 90" href="https://www.rocketmill.co.uk/web-design">
</map>

Now we just have to create the hover. I used jQuery to do this. Note the classes on <area> and both of the <img>. Here is the jQuery:

<script>
jQuery(document).ready(function($){
        $('.balloonHover').animate({ opacity : 0 }, 'fast').removeClass('hidden');
        $('.myClass').hover(function(){
            $('.balloonHover').stop().animate({ opacity : 1 }, 'slow');
        }, function(){
            $('.balloonHover').stop().animate({ opacity : 0 }, 'slow');
        });
});
</script>

That wasn’t so bad was it?