Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

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