Muchas gracias por tu respuesta jomaruro! creo que es lo que necesito, lamentablemente no esta funcionando. sera que estoy redactando mal el codigo??.
saludos y gracias!!
<ul>
<li class="principal">
<img src="imagenes/botonera_principal.png" usemap="#principal" />
<map name="principal"> <area shape="poly"
coords="66,0,11,18,4,26,0,41,4,52,67,268,68,253,69 ,5" href="principal.php"
/>
</map>
</li>
</ul>
.principal {
background-repeat: no-repeat;
cursor: pointer;
height: 258px;
margin-left: 54px;
margin-top: 58px;
overflow: hidden;
position: relative;
width: 66px;
z-index: 24;
}
.principal img:hover {
background-image: url("../imagenes/botonera_principal_over.png");
cursor: pointer;
height: 258px;
margin-left: 54px;
margin-top: -261px;
overflow: hidden;
position: relative;
width: 66px;
z-index: 24;
}