Ir para conteúdo

POWERED BY:

h3lyo

usemap trocar pedaço de imagem

Por , em Javascript

Recommended Posts

h3lyo    0

h3lyo
Postado

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.

 

gravador.png.92440f3b17996ddfaf36ba003bf000c2.png

<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>

 

verde.png

verm.png

Compartilhar este post

Link para o post
Compartilhar em outros sites

violin101    0

violin101
Postado

Olá, tudo bem ?

não sei se é o caso, mas não seria melhor colocar o IMG SRC desta forma: 

<img src="<?= base_url()?>caminho_pasta/nomeImagem.jpg" alt="">


 

Compartilhar este post

Link para o post
Compartilhar em outros sites

h3lyo    0

h3lyo
Postado
4 minutos atrás, violin101 disse:

Olá amigo, depois de horas e horas tentando consegui resolver assim: 


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

<script language="JavaScript">

function ligado(){
document.getElementById('LED1').style.backgroundColor = '#000000';
}

function desligado(){
document.getElementById('LED1').style.backgroundColor = '#CCCCCC';
}
</script>
</head>


<body> 

<img id="gravador" src="img/gravador.png">
<div class="LED1" id="LED1" onclick="ligado()">
</div>


<style>
.LED1{
position: absolute;
width: 19px; 
height: 9px; 
z-index: 1; 
left: 317px; 
top: 89px; 

/* Esta parte do pisca-pisca retirei daqui: */
/*https://bytutorial.com/blogs/css3/how-to-create-blinking-background-color-and-text-using-css3-animation */
/* Não vou usar em meu projeto porque será controlado pelo xml */

color: #fff;
padding: 1px;
display: inline-block;
border-radius:1px;
animation: blinkingBackground 1s infinite;
}

@keyframes blinkingBackground{

0%		{ background-color: #0099FF;} /*Azul claro*/
33%		{ background-color: #00FF00;} /*Verde claro*/
66%	    { background-color: #FF0000;} /*Vermelho*/
}
</style>
</body>
</html>

 

 

Citar 

<img src="<?= base_url()?>caminho_pasta/nomeImagem.jpg" alt="">


 

Olá amigo.

Depois de horas e horas tentando, consegui resolver assim:

 

gravador.png

Compartilhar este post

Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito