Muy buenas a todos, tengo un problema que seguramente se pueda resolver facilmente con Jquery pero no doy con ello!!
El caso es que me encuentro con una página en la que aparecen varios botones con sombreado... es necesario hacerles rollover y la única opcion es crear un mapa de imagen para cada uno de ellos ( Si utilizo png´s el área activa esta rodeando todo el boton, sin estar encima de él, obteniendo un efecto muy feo! )

He conseguido un script para hacer la sustitucion de imágenes con jquery, pero aplicar esto a un mapa de imagen es lo que no consigo.

Os dejo el código:

<script src="jquery-1.3.2.js" type="text/javascript"></script> <script language="jscript" type="text/jscript">

$(document).ready(function() {
$(".roll").each(function() {
rollsrc = $(this).attr("src");
rollON = rollsrc.replace(/.jpg$/ig, "_over.jpg");
$("<img>").attr("src", rollON);
});
$(".roll").mouseover(function() {
imgsrc = $(this).attr("src");
matches = imgsrc.match(/_over/);
if (!matches) {
imgsrcON = imgsrc.replace(/.jpg$/ig, "_over.jpg");
$(this).attr("src", imgsrcON);
}
});
$(".roll").mouseout(function() {
$(this).attr("src", imgsrc);
});
});
</script>

Muchas gracias de antemano!
Saludos