Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » HTML » COMO CAMBIAR DE IMAGEN SEGUN EL OPTION DE UN SELECT

HTML - COMO CAMBIAR DE IMAGEN SEGUN EL OPTION DE UN SELECT

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil

COMO CAMBIAR DE IMAGEN SEGUN EL OPTION DE UN SELECT

Publicado por Oscar (4 intervenciones) el 08/12/2022 10:03:32
Hola a todos , estoy intentando hacer un select que cuando elija por ejemplo el equipo de futbol del Barcelona , me salga la imagen de su escudo y cuando elijo otro equipo me cambie a su respectivo escudo , he probado muchas cosas pero no lo consigo , me podeis ayudar por favor , muchas gracias de antemano , este es el codigo que tengo hasta ahora.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
 
<html>
 
<head>
<title>Comparador de equipos</title>
</head>
 
<style>
h1{
color: #477ca7;
}
 
#caja-local{
height: 600px;
width: 49%;
border: 1px solid;
float: left;
}
 
#caja-visitante{
height: 600px;
width: 49%;
border: 1px solid;
float: right;
}
 
</style>
 
<body>
<h1><center><strong>COMPARADOR DE EQUIPOS</strong></center></h1>
<center>
<select id="equipo-local">
  <option value="elige-local" disabled selected>Elige el equipo local</option>
  <option value="Almeria">Almeria</option>
  <option value="Athletic">Athletic</option>
  <option value="Atletico">Atletico</option>
  <option value="Barcelona">Barcelona</option>
  <option value="Betis">Betis</option>
  <option value="Celta">Celta</option>
  <option value="Cadiz">Cadiz</option>
  <option value="Elche">Elche</option>
  <option value="Espanyol">Espanyol</option>
  <option value="Getafe">Getafe</option>
  <option value="Girona">Girona</option>
  <option value="Mallorca">Mallorca</option>
  <option value="Osasuna">Osasuna</option>
  <option value="Rayo">Rayo</option>
  <option value="Real-Madrid">Real Madrid</option>
  <option value="Real-Sociedad">Real Sociedad</option>
  <option value="Sevilla">Sevilla</option>
  <option value="Valencia">Valencia</option>
  <option value="Valladolid">Valladolid</option>
  <option value="Villarreal">Villarreal</option>
</select>
     
<select name="arbitro_encuentro">
  <option value="elige-arbitro" disabled selected>Arbitro del encuentro</option>
  <option value="1">R. deB. Bengoetxea</option>
  <option value="2">C.d.C. Grande</option>
  <option value="3">Jesús Gil Manzano</option>
  <option value="4">César Soto Grado</option>
  <option value="5">J.M.S. Martínez</option>
  <option value="6">J.I. Villanueva</option>
  <option value="7">M.Á.O. Arias</option>
  <option value="8">Alejandro Muñiz Ruiz</option>
  <option value="9">Mario Melero López</option>
  <option value="10">J.L.M. Montero</option>
  <option value="11">Pablo González Fuertes</option>
  <option value="12">Jorge Figueroa Vázquez</option>
  <option value="13">A.M.M. Lahoz</option>
  <option value="14">Juan Martínez Munuera</option>
  <option value="15">.J.L.P. Santana</option>
  <option value="16">G.C. Fernández</option>
  <option value="17">A.J.H. Hernández</option>
  <option value="18">I.D. deM. Escuderos</option>
  <option value="19">Valentín Pizarro Gómez</option>
</select>
     
<select name="equipo-visitante">
  <option value="elige-visitante" disabled selected>Elige el equipo visitante</option>
  <option value="Almeria">Almeria</option>
  <option value="Athletic">Athletic</option>
  <option value="Atletico">Atletico</option>
  <option value="Barcelona">Barcelona</option>
  <option value="Betis">Betis</option>
  <option value="Celta">Celta</option>
  <option value="Cadiz">Cadiz</option>
  <option value="Elche">Elche</option>
  <option value="Espanyol">Espanyol</option>
  <option value="Getafe">Getafe</option>
  <option value="Girona">Girona</option>
  <option value="Mallorca">Mallorca</option>
  <option value="Osasuna">Osasuna</option>
  <option value="Rayo">Rayo</option>
  <option value="Real-Madrid">Real Madrid</option>
  <option value="Real-Sociedad">Real Sociedad</option>
  <option value="Sevilla">Sevilla</option>
  <option value="Valencia">Valencia</option>
  <option value="Valladolid">Valladolid</option>
  <option value="Villarreal">Villarreal</option>
</select>
</center>
<br />
 
<div id="caja-local">
<br/>
    <center>AQUI DEBERIA DE APARECER EL ESCUDO DEL LOCAL</center>
 
 
</div>
 
<div id="caja-visitante">
   <center>AQUI DEBERIA DE APARECER EL ESCUDO DEL VISITANTE</center>
</div>
 
</body>
 
</html>
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 ScriptShow
Val: 359
Bronce
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

COMO CAMBIAR DE IMAGEN SEGUN EL OPTION DE UN SELECT

Publicado por ScriptShow (409 intervenciones) el 08/12/2022 13:48:54
Saludos Oscar,

veamos un ejemplo sencillo, entendible, adaptable...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<h2>Comparador de Equipos</h2>
<hr>
<b>Local:</b><p><img src="" id="local" width="180" height="180"></p>
<select id="select" onchange="local(this.value)">
<option value="op00">Selecciona un Equipo ...</option>
<option value="op01">Equipo 01</option>
<option value="op02">Equipo 02</option>
<option value="op03">Equipo 03</option>
<option value="op04">Equipo 04</option>
</select>
<hr>
<b>Visitante:</b><p><img src="" id="visit" width="180" height="180"></p>
<select id="select" onchange="visit(this.value)">
<option value="op00">Selecciona un Equipo ...</option>
<option value="op01">Equipo 01</option>
<option value="op02">Equipo 02</option>
<option value="op03">Equipo 03</option>
<option value="op04">Equipo 04</option>
</select>
<hr>
<b>Árbitro:</b><p><img src="" id="arbit" width="180" height="180"></p>
Etc...
<hr>
<script>
function local(o) {
document.getElementById("local").src = o + ".jpg";
}
 
function visit(o) {
document.getElementById("visit").src = o + ".jpg";
}
 
function arbit(o) {
document.getElementById("visit").src = o + ".jpg";
}
</script>

Puedes adaptar el Script y los Eventos a tu código, para que tenga el aspecto que quieras...

Espero sea útil.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil

COMO CAMBIAR DE IMAGEN SEGUN EL OPTION DE UN SELECT

Publicado por Oscar (4 intervenciones) el 08/12/2022 16:26:52
Hola , muchas gracias por tu ayuda , estoy intentando implanarlo en mi codigo y me surge una duda , donde se supone que tengo que poner la direccion de la carpeta donde quiero que me traiga las imagenes , en mi caso tengo los escudos en una carpeta que se llama Imagenes de los escudos .

La he intentado poner aqui : document.getElementById("local").src = o + ".jpg";

Pero no me sale , muchas gracias de nuevo , soy muy nuevo y me gusta investigar .
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

COMO CAMBIAR DE IMAGEN SEGUN EL OPTION DE UN SELECT

Publicado por VideoTop370 (2 intervenciones) el 09/12/2022 20:18:59
Para cambiar la imagen de una página según la opción seleccionada en un elemento "select" en HTML, puedes usar una combinación de JavaScript y el atributo "src" de la etiqueta "img". Por ejemplo, supongamos que tienes un elemento "select" y una etiqueta "img" en tu página:
1
2
3
4
5
6
7
8
9
<form>
  <label for="mySelect">Elige un equipo:</label>
  <select id="mySelect">
    <option>Barcelona</option>
    <option>Real Madrid</option>
    <option>Atlético de Madrid</option>
  </select>
</form>
<img id="escudo" src="barcelona.png">

Para cambiar la imagen de la etiqueta "img" según la opción seleccionada en el elemento "select", puedes agregar un controlador de eventos "change" al elemento "select" y usar JavaScript para cambiar el valor del atributo "src" de la etiqueta "img" cuando el usuario cambie la selección en el elemento "select". Por ejemplo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<form>
  <label for="mySelect">Elige un equipo:</label>
  <select id="mySelect" onchange="changeImage()">
    <option>Barcelona</option>
    <option>Real Madrid</option>
    <option>Atlético de Madrid</option>
  </select>
</form>
<img id="escudo" src="barcelona.png">
 
<script>
  function changeImage() {
    // Obtener el elemento "select"
    var select = document.getElementById("mySelect");
 
    // Obtener la opción seleccionada
    var selectedOption = select.options[select.selectedIndex].value;
 
    // Obtener la imagen
    var image = document.getElementById("escudo");
 
    // Cambiar la imagen según la opción seleccionada
    if (selectedOption == "Barcelona") {
      image.src = "barcelona.png";
    } else if (selectedOption == "Real Madrid") {
      image.src = "realmadrid.png";
    } else if (selectedOption == "Atlético de Madrid") {
      image.src = "atleticodemadrid.png";
    }
  }
</script>

Con este código, cuando el usuario cambie la selección en el elemento "select", se ejecutará la función "changeImage()" que cambiará la imagen de la etiqueta "img" según la opción seleccionada. De esta manera, cuando el usuario seleccione un equipo en el elemento "select", se mostrará el escudo del equipo seleccionado en la etiqueta "img".

Espero que esto ayude. ¡Buena Suerte!
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
Imágen de perfil de ScriptShow
Val: 359
Bronce
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

COMO CAMBIAR DE IMAGEN SEGUN EL OPTION DE UN SELECT

Publicado por ScriptShow (409 intervenciones) el 09/12/2022 23:37:43
La idea es válida. Pero, si hay muchas imágenes, el Script se hace muy extenso. Puede haber un tiempo al procesar las condiciones, etc.
Como experimento, está bien para ir viendo opciones y resultados.

Un cordial saludo.
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