ImageMap con CSS

Aster, Rosa, Caléndula
<div id="flowerbox">
<img src="blumen.jpg" width="767" height="267" alt="Aster, Rosa, Caléndula">
<ul>
<li class="aster"><a href="#" title="Aster">Aster</a></li>
<li class="rose"><a href="#" title="Rosa">Rose</a></li>
<li class="ringel"><a href="#" title="Caléndula">Caléndula</a></li>
</ul>
</div>

#flowerbox {
position: relative;
width: 767px;
height: 267px;
}
#flowerbox ul {
list-style: none;
}
#flowerbox a {
position: absolute;
width: 220px;
height: 210px;
text-indent: -2000px;
text-decoration: none;
}
#flowerbox .aster a {
top: 23px;
left: 15px;
}
#flowerbox .rose a {
top: 23px;
left: 260px;
}
#flowerbox .ringel a {
top: 23px;
left: 520px;
}
#flowerbox a:hover {
border: 2px solid #666;
}

* html #flowerbox a {
background-image: url(blind.gif);
}
Otra opción de uso sin blind.gif:
#flowerbox .aster a {
top: 23px;
left: 15px;
background-image: url(blumen.jpg);
background-repeat: no-repeat;
background-position: -15px -23px;
}
#flowerbox .rose a {
top: 23px;
left: 260px;
background-image: url(blumen.jpg);
background-repeat: no-repeat;
background-position: -260px -23px;
}
#flowerbox .ringel a {
top: 23px;
left: 520px;
background-image: url(blumen.jpg);
background-repeat: no-repeat;
background-position: -520px -23px;
}
#flowerbox a:hover {
border: 2px solid #666;
}
#flowerbox .aster a:hover {
background-position: -17px -25px;
}
#flowerbox .rose a:hover {
background-position: -262px -25px;
}
#flowerbox .ringel a:hover {
background-position: -522px -25px;
}

Índice Capítulo 8
Contenido material adicional