Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » HTML » Enlace imagen directo

HTML - Enlace imagen directo

Volver
Nuevo Tema
<<>>
 
Vista:

Enlace imagen directo

Publicado por Vmetal (4 intervenciones) el 07/08/2020 18:03:17
Hola, estoy realizando un proyecto con un arduino,esp8266 para que sea un servidor web. En una parte del código tengo dos botones los cuales quiero que cuando se pulse uno de los dos, aparezca su imagen correspondiente. Si pongo el siguiente código en el html que carga al inicio si que aparece la imagen:
1
2
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
<i class="fas fa-thermometer-half"></i>


Pero cuando pulso uno de los botones aparece un espacio y no la imagen y es posible que sea por introducir mal el código. He conseguido que funcione utilizando el siguiente código con una imagen de prueba:

1
"<img src=""https://www.w3schools.com/images/colorpicker.gif"">"


¿Hay alguna manera de poner la imagen del código de arriba en el formato como el segundo código?

Gracias
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Lopez
Val: 886
Plata
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Enlace imagen directo

Publicado por Lopez (271 intervenciones) el 07/08/2020 20:23:02
Hola Vmetal,
Font Awesome es una fuente, por lo cual imagino puedes :
Crear una función js que haga toggle o bien setear un estado activo via css,
o mejor aun, mezclar ambos!

Quedamos atentos,
Saludos!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Enlace imagen directo

Publicado por Vmetal (4 intervenciones) el 08/08/2020 13:12:10
Hola Lopez, gracias por contestar tan rápido.

Como no tengo mucha idea de javascript comento un poco mas en detalle el proyecto en html con arduino IDE por si la solución fuera mas fácil. Tengo dos botones "boton 1" y "boton 2".

1
2
<p><a href="/get?input5=0"><button class="button">MODO FRIO</button></a>
        <a href="/get?input5=1"><button class="button"style="background-color: #D76912;">MODO CALOR</button></a></p>

cuando se pulsan mandan un "0" o un "1" al valor del input5 el cual lo recoge una variable (modo_actual) en el arduino. Todo esto funciona. Debajo de estos dos botones tengo un span para ver el valor de la variable "modo actual" en pantalla:
1
<span style="color:#272FB1;"id="modo_actual">%modo_actual%</span>
Donde en arduino mando el valor de esa variable:
1
2
server.on("/modo_actual", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/plain", String(modo_funcionamiento).c_str());
Todo esto funciona.
Ahora realizo un script que se ejecute cada 3 segundos para ir actualizando en el navegador le valor de la variable "modo_actual"
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script>
setInterval(function ( ) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
document.getElementById("modo_actual").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "/modo_actual", true);
  xhttp.send();
  var valor = document.getElementById("modo_actual").innerHTML;
  if (valor==0)
  {
  document.getElementById("pic").style.visibility="visible";
  }
  else
  {
  document.getElementById("pic").style.visibility="hidden";
  }
}, 3000 ) ;
</script>

El valor de "modo_actual" en pantalla me lo actualiza bien siendo "0" si pulso el botón nº1 y "1" si pulso el botón nº2. El problema está en que la variable valor no me coge el valor de la variable modo_actual y no puedo comparar
es decir el problema está en esta linea:
1
2
var valor = document.getElementById("modo_actual").innerHTML;
  if (valor==0)

Y no se de que forma hacerlo funcionar.
Debajo del span va la imagen
1
<i id="pic" class="far fa-snowflake"style="color:#272FB1;"></i>

Muchas gracias
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Enlace imagen directo

Publicado por Vmetal (4 intervenciones) el 08/08/2020 13:52:17
Ya lo he conseguido, tenía mal la linea donde el arduino mandaba el valor de la variable al navegador. En el mensaje anterior está todo correcto y funciona perfectamente. Gracias!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar