Cambiar partes de una misma imagen

¿Cuantas veces tienes una imagen y quieres que cuando se pase el ratón por una parte de dicha imágen esta cambie pero solamente ese trozo de la imagen?

Si, esto es muy cierto, pues en el HTML tenemos lo que son los mapas, esos rectángulos, círculos y polígonos que muchas vidas han salvado ;) muy vistas en mapas (de ahí que se llamen mapas de imágenes!) pero sólo sirven para enlzar a otras páginas pulsando en esa zona.

Y ya lo que quieres es cambiar la imagen cuando pase por encima: no-problemo, eso es facil.

primero nos creamos el script:

function cambiaImg(ruta_img)
{
document.getElementById('laimg').src = ruta_img;
//laimg es el id de la imagen
}

El siguiente código script es el mismo que el anterio pero para cambiar más de una imagen, me explico: en el anterior usando esta función simplente cambias una (en este caso 'laimg') y aqui pasamos dos parámetros el identificador y la ruta de la imagen en cuestión.

function cambiaImg(id_img, ruta_img)
{
document.getElementById(id_img).src = ruta_img;
}

Y en el del mapa ponemos estos eventos...

onmouseover="cambiaImg('imgs/ima.GIF')" //cambiar
onmouseout="cambiaImg('imgs/im0.GIF')" //restaurar

Descargar ejemplo