Olá a todos:
Como faço pra trocar apenas um pedaço da imagem sem ter q ter varias imagens de fundo diferentes ?
Gostaria de trocar apenas o ponto marcado com a seta na imagem (o ponto azul) por vermelho.
Na verdade isso é só um exemplo, pois vou precisar mudar vários pontos ao mesmo tempo (todos os pontos coloridos)
dependendo do xml.
Não posso usar varias imagens de tamanho grande, pois o servidor é um ESP8266 e ficaria pesado pra ele, preciso trocar apenas as
imagens de 19x9 pixels.
Tentei isso, mas não dá certo.
Aceito qualquer ajuda.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>TROCA IMAGEM</title>
</head>
<body>
<img id="gravador" src="gravador.png" alt="Workplace" width="513" height="535" usemap="#gravadormap" >
<map name="gravadormap">
<area id="ponto" shape="rect" coords="328,90,311,82" onmouseover="verde();" onmouseout="verm()" alt="map" href="map.html">
</map>
<script>
function verde(){
document.getElementById('ponto').src=verde.png; //NÃO DÁ CERTO
}
function verm(){
document.getElementById('ponto').src=verm.png; //NÃO DÁ CERTO
}
</script>
</body>
</html>
