javascript – Alterar pedaço da imagem (cor ou outra imagem) mapeada

Preciso alterar alguns os locais coloridos dessa imagem, (vai depender do que vem do xml), não posso usar varias imagens “grandes” de fundo porque o servidor é fraco, ficaria pesado, vou usar um ESP8266.

Então gostaria de alterar pedaços de 19×9 pixels (simulando led aceso, led apagado, piscando, etc.

Como exemplo, tentei alterar a cor do led azul, indicado pela seta, mas não tive sucesso.

Coordenadas do pedaço que quero alterar (pode ser por cor ou por outra imagem)
328,90,311,82

Segue o código que tentei.

inserir a descrição da imagem aqui

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>TROCA IMAGEM</title>

</head>
<body>

<img  id="gravadorid" src="https://pt.stackoverflow.com/gravador.png" alt=""  width="513" height="535" usemap="#gravador" >

<map name="gravador">
<area id="mini" shape="rect" coords="328,90,311,82" onmouseover="verde()" onmouseout="verm()" href="map.html">
</map>



<script>

function verde(){
document.getElementById(mini).src="verde.png"; //quero mudar a cor do led azul, marcado pela seta
}


function verm(){
document.getElementById(mini).src="verm.png"; //quero mudar a cor do led azul, marcado pela seta
}

</script>




</body>
</html>