Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » Click en Boton le inserta a si mismo una imagen

JavaScript - Click en Boton le inserta a si mismo una imagen

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

Click en Boton le inserta a si mismo una imagen

Publicado por Nicolas (7 intervenciones) el 22/04/2016 00:36:47
Hola gente, tengo una consulta.
Estoy usando JavaScript y HTML, necesito que cuando a un boton se le hace click, asi mismo se le pueda poner una imagen de fondo(al botón).
Estoy con un ejercicio de la facultad donde hay que programar un "tateti", entonces arme una tabla de 3x3, con botones dentro de cada celda y la idea es que cuando hago click en un boton se muestra una imagen, ya sea circulo o cruz, de momento solo necesito la linea de codigo especifica de meter la imagen, el resto ya lo tengo medio ideado.
Lo que estoy usando actualmente que no me anda es esto:
$("#img11").src = "Resources/circulo.jpg";

Estoy también utilizando JQuery, deducible por la sintaxis anterior.
Muchas gracias, saludos
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 xve
Val: 3.162
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Click en Boton le inserta a si mismo una imagen

Publicado por xve (2100 intervenciones) el 22/04/2016 08:35:58
Hola Nicolas, prueba así:
1
$("#img11").attr("src", "Resources/circulo.jpg");

Coméntanos, ok?
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

Click en Boton le inserta a si mismo una imagen

Publicado por Nicolas (7 intervenciones) el 22/04/2016 15:16:09
Hola, intente aplicar esa línea de código, pero no funciono ni en una función, ni en ámbito global (para que se ejecute de "prepos" cuando inicie la pag).
Esa sintaxis no parece incorrecta, lo que no se, es si es necesario hacerle un refresh() o reload() o algo de ese estilo al boton unicamente, para que la img aparezca al actualizar el componente.
Muchas gracias, 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
sin imagen de perfil

Click en Boton le inserta a si mismo una imagen

Publicado por Nicolas (7 intervenciones) el 22/04/2016 16:58:31
Acá esta el ejercicio, tiene un par de pequeños detalles con css, experimentando mas que nada, el jquery es la versión 1. algo, no recuerdo exactamente cual es, la linea de código esta en la función y en el ámbito global del fichero, intentando que funcione como sea.
Gracias, 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
sin imagen de perfil

Click en Boton le inserta a si mismo una imagen

Publicado por Nicolas (7 intervenciones) el 22/04/2016 18:30:25
No se si llego el adjunto, la pag del foro me dice que subio, pero cuando lo veo en el msge no aparece el adjunto.
el codigo js es este:
--------------------------------
1
2
3
4
5
6
7
8
9
10
$(document).ready(load);
$("#img11").attr("src", "resources/circulo.jpg");
 
var contador =0 ;
function load(){
    $("#img11").click(colocarImagen);
}
function colocarImagen(){
    $("#img11").attr("src", "resources/circulo.jpg");
}
--------------------------------
--------------------------------- ahora codigo html
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
<HTML>
	<HEAD>
		<TITLE> Ejercicio 29 </TITLE>
		<SCRIPT type="text/javascript" src="jquery.js"></SCRIPT>
		<SCRIPT type="text/javascript" src="codigo.js"></SCRIPT>
		<LINK rel="stylesheet" href="estilos.css">
	</HEAD>
 
	<BODY>
		<H1> TA TE TI - The VideoGame </H1>
		<CENTER>
		<TABLE border=5 id="TablaPrincipal">
			<!-- Las imagenes estan denominadas por su prefijo "img" y las coordenadas basadas en (x[fila],y[columna]), 

			cada eje de la matriz no comienza en 0 para poder facilitar la ubicación de cada elemento por medio del codigo javascript -->
			<TR height=200>
				<TD width=200>
					<INPUT type="button" id="img11" height=200 width=200>
				</TD>
 
				<TD width=200>
					<INPUT type="button" id="img21" height=200 width=200>
 
				</TD>
 
				<TD width=200>
					<INPUT type="button" id="img31" height=200 width=200>
				</TD>
			<TR>
			<TR height=200>
				<TD width=200>
					<INPUT type="button" id="img12" height=200 width=200>
				</TD>
 
				<TD width=200>
					<INPUT type="button" id="img22" height=200 width=200>
				</TD>
 
				<TD width=200>
					<INPUT type="button" id="img32" height=200 width=200>
				</TD>
			<TR>
			<TR height=200>
				<TD width=200>
					<INPUT type="button" id="img13" height=200 width=200>
				</TD>
 
				<TD width=200>
					<INPUT type="button" id="img23" height=200 width=200>
				</TD>
 
				<TD width=200>
					<INPUT type="button" id="img33" width=200 height=200>
				</TD>
			<TR>
			</CENTER>
	</BODY>
</HTML>
--------------------------------------------------
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
sin imagen de perfil

Click en Boton le inserta a si mismo una imagen

Publicado por Nicolas (7 intervenciones) el 23/04/2016 15:26:47
Existe algún atributo para el input (button), para que pueda meterle una imagen adentro?
---------------------------------------------------------------------------------- (Edito: unos minutos después pude resolver el problema, aquí la solución)
En mi archivo CSS, creo estas dos clases:
1
2
3
4
5
6
7
8
9
10
.mostrarCirculo{
background: url(resources/circulo.jpg);
background-repeat: no-repeat;
border: none
}
.mostrarCruz{
background: url(resources/cruz.jpg);
background-repeat: no-repeat;
border: none
}
Entonces, invoco a la misma desde javascript cuando necesite una o otra, para ello utilizo esta linea en javascript:
1
$("#img11").attr("class", "mostrarCirculo");
o
1
$("#img11").attr("class", "mostrarCruz");
-----------------------------------------------------------------
Funciono %100, dejo la solución acá mas que nada por si otro llega a tener un problema similar, muchas gracias por su ayuda, saludos
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
Imágen de perfil de xve
Val: 3.162
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Click en Boton le inserta a si mismo una imagen

Publicado por xve (2100 intervenciones) el 24/04/2016 11:30:39
Gracias por mostrarlo Nicolas!!!
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