Interactuar con áreas de mapas de imágenes

[CHuLoSoY]

Hola amigos.

Tengo un problemilla y es que no creí que iba a ser tan difícil. No encuentro información y lo que intenté no funciona.

Resulta que tengo un mapa de imagen con diferentes áreas. Al ponerse encima de un área necesito que cambie de color, con lo que intenté un this.style.backgroundColor:

Código HTML:

<img src="mapa.png" usemap="#mapa">
<map name="mapa">
  <area shape="rect" coords="142,40,181,61" href="#"  onmouseover="this.style.backgroundColor='orange';"/>
</map>
 

Pero claro, no funciona. Y yo me pregunto: hay alguna manera de aplicar una clase o cambiar una imagen en un área en concreto o tengo que cortar área a área y hacer una imagen general de cada una para cambiarlas dinámicamente? Esta última opción como entenderéis es inviable hasta para el usuario.

Gracias por vuestras ideas y sugerencias.

Saludos.