Mapped images and CSS Sprites

I like maps as you can tell, or to be perfectly honest, I work with maps quite often at the moment. And when I find something interesting it usually end up here, so I can share it but also find it later on for other projects.

Today we’re talking about mapped images. Image mapping is an html way to have links on a picture by specifying clickable areas on the picture.

It usually looks like that (from W3school):

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" />
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury" />
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus" />
</map>

Explanation can be found there.

Add a little twist

That’s all very good but what if you want some fancy hover effect on the different areas? The easy solution is to get the code from Adobe ImageReady. However, it does a very good job at mapping your image but when it comes to the hover effect I’m not convinced.

The way ImageReady does the hover is by creating multiple images, each with the hover state and preload them with javascript. What I wanted to do is get rid of the preloading and use the CSS sprites technique instead.

Less html requests, so it should be better right?

One big image

To begin I would create my sprites, all hover states on one single image. You need to keep the same size for each sprite, it is important for the rest on the stuff.

I am working on an map of the UK + Ireland which looks like this when finished:

mapped-demo

One transparent image

Now that we’ve got the background we need to replace the actual image by a transparent one to see through. A blank gif/png should do the trick. Keep the excact same size as the original picture as the mapping wont be accurate if you don’t.

Html and CSS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head profile="http://gmpg.org/xfn/11">

	<title>CSS Sprites and Image mapping</title>

	<link rel="stylesheet" type="text/css" href="style.css" />
	<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
	<script type='text/javascript' src='functions.js'></script>

</head>
<body>
	<img src="./map-popup.gif" alt="" usemap="#map_popup_Map" id="mapped_map_popup" />
	<map name="map_popup_Map" id="map_popup_Map">
		<area shape="poly" title="Scotland" alt="" coords="114,5, 123,40, 132,43, 119,80, 126,84, 119,92, 121,95, 95,117, 79,107, 50,61, 60,17" href="" />
		<area shape="poly" title="Northern England" alt="" coords="126,83, 120,91, 122,96, 99,116, 106,144, 118,137, 153,135" href="" />
		<area shape="poly" title="Wales" alt="" coords="113,152, 101,141, 86,143, 77,186, 108,190, 114,181, 108,174, 108,154" href="" />
		<area shape="poly" title="Midlands" alt="" coords="108,145, 114,152, 110,155, 110,168, 130,165, 148,165, 141,149, 143,136, 117,139" href="" />
		<area shape="poly" title="Heart of England" alt="" coords="108,170, 108,174, 116,184, 148,183, 148,180, 151,176, 149,168, 130,167, 110,169" href="" />

		<area shape="poly" title="East of England" alt="" coords="144,136, 144,154, 153,176, 156,176, 162,180, 162,186, 179,170, 176,154, 151,136" href="" />
		<area shape="poly" title="West Country" alt="" coords="102,192, 102,217, 69,222, 66,217, 92,192" href="" />
		<area shape="poly" title="Southern England" alt="" coords="148,184, 114,185, 104,194, 104,213, 154,209, 154,190, 149,192" href="" />
		<area shape="poly" title="South East" alt="" coords="155,206, 176,192, 176,189, 164,189, 163,186, 155,192" href="" />
		<area shape="poly" title="Ireland" alt="" coords="63,92, 82,122, 60,174, 7,185, 0,167, 16,105" href="" />
	</map>
</body>
</html>

and the css

#mapped_map_popup{
	background:url(map-popup-sprites.gif) left top;
}

And javascript to finish it

The javascript just moves the background from a position to another. It was important to keep the same dimension for each sprite so we can move the background by always the same amount of pixels. The other constrainct is to have your areas in the same order the hover states are on the pictures. This is so we can just miltiply the amount of pixels to move by the position of the area you are on.

This script uses jQuery but it should adapt to any library quite easily (you need to put this in functions.js if you have copied the html above).

$(document).ready(function () {
	$('#map_popup_Map area').each(function(i){
		
		$(this).mouseover(function(){
			bgpos = '-'+(((i+1)*182))+'px 0px';
			$('#mapped_map_popup').css({'background-position':bgpos});
		});
		$(this).mouseout(function(){
			$('#mapped_map_popup_popup').css({'background-position':'0 0'});
		});
	});
});

You can look at the demo page to see the end result if everything went well.

Demo page

Now the question is, is this a good technique, or do you know of any other way to do the same?

Related Items and Services:
Poly Tunnel at great prices.
We sell Mens Fancy Dress Costumes
Holidays in Wales at great rates
Heart Screening carried out here