Lo e conseguido xDDDDDD era una chorrada como todas las cosas de esta vida jajaja pero bueno dejo la solución y una pequeña duda que tengo.
Código:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.colorbox.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("area[alt='example1']").colorbox({transition:"fade"});
});
</script>
</head>
<body>
<img src="plano.png" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="poly" coords="198,7,198,53" alt="example11" title="Perruquería" href="images/instalaciones/peluqueria.jpg" />
</a>
</map>
</body>
el ejemplo aqui:
www.ribesvet.com
La duda que tengo si veis tiene 2 idiomas, porque solo me funciona en castellano si tengo un corta pega? puede ser problema de que el id="Map" esta definido ya en uno de ellos?
Gracias majetes!