CSS: create image maps

  • CSS
  • Gabriele Romanato

CSS image maps are always very popular among web developers, despite of the several years passed and the recent enhancements introduced by HTML5 and CSS3. In this post, I'd like to show you how to build a CSS image map.

The markup

Our map is a geographic map of Italy featuring several points which indicate the position of every Italian region, with numbers. Clicking on a link will redirect the user to the corresponding Google search query page.

We'll use an ordered list here:

<ol id="map">
<li><a href="http://www.google.com/search?hl=en&q=valle+aosta" title="Valle D'Aosta" id="aosta"><span>Valle D'Aosta</span></a></li>
<li><a href="http://www.google.com/search?hl=en&q=piemonte" title="Piemonte" id="piemonte"><span>Piemonte</span></a></li>
<li><a href="http://www.google.com/search?hl=en&q=lombardia" title="Lombardia" id="lombardia"><span>Lombardia</span></a></li>
<li><a href="http://www.google.com/search?hl=en&q=trentino+alto+adige" title="Trentino Alto-Adige" id="trentino"><span>Trentino Alto-Adige</span></a></li>
<li><a href="http://www.google.com/search?hl=en&q=veneto" title="Veneto" id="veneto"><span>Veneto</span></a></li>
<li><a href="http://www.google.com/search?hl=en&q=friuli+venezia+giulia" title="Friuli Venezia-Giulia" id="friuli"><span>Friuli Venezia-Giulia</span></a></li>
<li><a href="http://www.google.com/search?hl=en&q=liguria" title="Liguria" id="liguria"><span>Liguria</span></a></li>
<li><a href="http://www.google.com/search?hl=en&q=emilia+romagna" title="Emilia Romagna" id="emilia"><span>Emilia Romagna</span></a></li>
<li><a href="http://www.google.com/search?hl=en&q=toscana" title="Toscana" id="toscana"><span>Toscana</span></a></li>
<li><a href="http://www.google.com/search?hl=en&q=umbria" title="Umbria" id="umbria"><span>Umbria</span></a></li>
<li><a href="http://www.google.com/search?hl=en&q=marche" title="Marche" id="marche"><span>Marche</span></a></li>
<li><a href="http://www.google.com/search?hl=en&q=lazio" title="Lazio" id="lazio"><span>Lazio</span></a></li>
<li><a href="http://www.google.com/search?hl=en&q=abruzzo" title="Abruzzo" id="abruzzo"><span>Abruzzo</span></a></li>
<li><a href="http://www.google.com/search?hl=en&q=molise" title="Molise" id="molise"><span>Molise</span></a></li>
<li><a href="http://www.google.com/search?hl=en&q=campania" title="Campania" id="campania"><span>Campania</span></a></li>
<li><a href="http://www.google.com/search?hl=en&q=puglia" title="Puglia" id="puglia"><span>Puglia</span></a></li>
<li><a href="http://www.google.com/search?hl=en&q=basilicata" title="Basilicata" id="basilicata"><span>Basilicata</span></a></li>
<li><a href="http://www.google.com/search?hl=en&q=calabria" title="Calabria" id="calabria"><span>Calabria</span></a></li>
<li><a href="http://www.google.com/search?hl=en&q=sicilia" title="Sicilia" id="sicilia"><span>Sicilia</span></a></li>
<li><a href="http://www.google.com/search?hl=en&q=sardegna" title="Sardegna" id="sardegna"><span>Sardegna</span></a></li>
</ol>

The CSS code

First, we need to apply a background image to the list, reset its styles and create contextual positioning:

#map {
	width: 460px; 
	height: 589px; 
	margin: 0; 
	padding: 0; 
	background: url("cartina.gif") no-repeat 0 0; 
	position: relative;
}

Then we need to declare all the list items as absolutely positioned within the map:

#map li {
	display: block; 
	width: 12px;
}
#map li a {
	display: block; 
	position: absolute; 
	width: 12px; 
	height: 12px; 
	margin: 0;
}
#map li span {display: none;}

Finally, we position each item, one by one:

#aosta {top: 110px; left: 50px;}
#piemonte {top: 145px; left: 63px;}
#lombardia {top: 120px; left: 128px;}
#trentino {top: 85px; left: 179px; }
#veneto {top: 126px; left: 190px;}
#friuli {top: 98px; left: 238px; }
#liguria {top: 178px; left: 106px;}
#emilia {top: 174px; left: 170px;}
#toscana {top: 227px; left: 168px;}
#umbria {top: 253px; left: 210px; width: 20px !important;}
#marche {top: 232px; left: 240px; width: 20px !important;}
#lazio {top: 300px; left: 215px; width: 20px !important;}
#abruzzo {top: 284px; left: 260px; width: 20px !important;}
#molise {top: 314px; left: 287px; width: 20px !important;}
#campania {top: 346px; left: 290px; width: 20px !important;}
#puglia {top: 320px; left: 322px; width: 20px !important;}
#basilicata {top: 368px; left: 343px; width: 20px !important;}
#calabria {top: 425px; left: 360px; width: 20px !important;}
#sicilia {top: 509px; left: 270px; width: 20px !important;}
#sardegna {top: 385px; left: 86px; width: 20px !important;}

You can see the demo below.

Demo

Live demo

Back to top