Toujours sur la même base que l'article précédent et suite à un commentaire d'un de nos lecteurs demandant si on pouvait faire la même chose avec des ovales,
voici le résultat.

Voici le dossier complet.

Et voici le code : 

<!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" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Untitled</title>
	<style type="text/css" title="text/css">
/* <![CDATA[ */
body { font-family: Arial,Helvetica,sans-serif; }
/* Groupe d'animaux */
#gmap {display:block; width:600px; height:400px; background:url(group_white.gif); position:relative; margin:0 auto 2em auto;}
#gmap a {color:#000; font-family:arial, sans-serif; font-size:1.2em; font-weight:bold; text-transform:uppercase;}

a#title2, a#title2:visited {display:block; width:600px; height:0; padding-top:400px; position:absolute; left:0; top:0; cursor:default; text-decoration:none;}
* html a#title2 {height:400px; he\ight:0;}
#gmap a#title2:hover {background:transparent url(group_col.gif) no-repeat 0 0; overflow:visible; color:#c00;}

a#rhino {display:block; width:126px; height:0; padding-top:126px; overflow:hidden; position:absolute; left:131px; top:151px;}
* html a#rhino {height:130px; he\ight:0;}
a#rhino:hover {background:transparent url(rhino.gif) no-repeat 0 0; overflow:visible;}

a#zebre {display:block; width:68px; height:0; padding-top:122px; overflow:hidden; position:absolute; left:208px; top:175px;}
* html a#zebre {height:122px; he\ight:0;}
a#zebre:hover {background:transparent url(zebre.gif) no-repeat  0 0; overflow:visible;}

a#buffle {display:block; width:87px; height:0; padding-top:149px; overflow:hidden; position:absolute; left:236px; top:152px;}
* html a#buffle {height:149px; he\ight:0;}
a#buffle:hover {background:transparent url(buffle.gif) no-repeat 0 0; overflow:visible;}

a#girafe {display:block; width:78px; height:0; padding-top:222px; overflow:hidden; position:absolute; left:299px; top:82px;}
* html a#girafe {height:78px; he\ight:0;}
a#girafe:hover {background:transparent url(girafe.gif) no-repeat 0 0; overflow:visible;}

a#gazelle {display:block; width:67px; height:0; padding-top:149px; overflow:hidden; position:absolute; left:359px; top:152px;}
* html a#gazelle {height:149px; he\ight:0;}
a#gazelle:hover {background:transparent url(gazelle.gif) no-repeat 0 0; overflow:visible;}

/* ]]> */
</style>
</head>
<body>
<dl id="gmap">
<dt><a id="title2" href="#nogo">Safari</a></dt>
<dd><a id="rhino" title="Rhino" href="rhino.html">Rhino</a></dd>
<dd><a id="zebre" title="Zebre" href="zebre.html">Zebre</a></dd>
<dd><a id="buffle" title="Buffle" href="buffle.html">Buffle</a></dd>
<dd><a id="girafe" title="Girafe" href="girafe.html">Girafe</a></dd>
<dd><a id="gazelle" title="Gazelle" href="gazelle.html">Gazelle</a></dd>
</dl>
</body>
</html>