Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » modificar varias imágenes

JavaScript - modificar varias imágenes

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

modificar varias imágenes

Publicado por Manuel (5 intervenciones) el 07/11/2013 19:00:29
Buenas, he intentado hacer el ejercicio de las 8 reinas. (Supongo que mas de uno lo conocerá, colocar 8 reinas en el tablero de ajedrez sin que se puedan matar las unas a las otras).

El caso es que me he atascado en el uso de javascript. En un principio clickara en la imagen que clickara siempre se me modificaba la primera casilla. Me comentaron que debia de ser por el nombre de la imagen. Así que lo modifiqué, pero ahora solo cambia la primera casilla de cada columna. Aquí os dejo el código:


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
<html>
	<head>
	<link href="css/estilo.css" rel="stylesheet" type="text/css"/>
	<script language="javascript">
 
		imagen1=new Image
 
		imagen1.src="imgs/casillab.jpg"
 
		imagen2=new Image
 
		imagen2.src="imgs/casillabr.jpg"
		imagen3=new Image
 
		imagen3.src="imgs/casillan.jpg"
 
		imagen4=new Image
 
		imagen4.src="imgs/casillanr.jpg"
 
		var a=new array(2);
		var b=new array(2);
 
		function cambiar(i,j) {
 
		   if (a == 1)
 
			  {
 
			  document.images[i,j].src=imagen2.src
 
			  a=2;
 
			  }
 
		   else
 
			  {
 
			  document.images[i,j].src=imagen1.src;
 
			  a=1;
 
			  }
 
		   }
		function cambiar2(i,j) {
 
		   if (b == 1)
 
			  {
 
			  document.images[i,j].src=imagen3.src
 
			  b=2;
 
			  }
 
		   else
 
			  {
 
			  document.images[i,j].src=imagen4.src;
 
			  b=1;
 
			  }
 
		   }
	</script>
	</head>
	<body>
<?php
	for ($i=0;$i<8;$i++)
		{
		for ($j=0;$j<8;$j++)
			{
			if (($i-$j)%2==0)
				{
				echo "<img src='imgs/casillab.jpg' name='$i,$j' onMousedown='cambiar($i,$j)'> ";
 
				}
			else
				{
				echo "<img src='imgs/casillan.jpg' name='$i,$j' onMousedown='cambiar2($i,$j)'>";
 
				}
			}
		echo "<br>";
		}
 
 
?>
</body>
</html>

Gracias de antemano por su ayuda.
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

modificar varias imágenes

Publicado por xve (2100 intervenciones) el 07/11/2013 21:30:36
Hola Manuel, creo que el problema lo tienes en estas lineas:
1
2
var a=new array(2);
        var b=new array(2);

Tiene que ser así:
1
2
var a=new Array(2);
        var b=new Array(2);

Lo he probado y me ha funcionado... 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
0
Comentar
sin imagen de perfil

modificar varias imágenes

Publicado por Manuel (5 intervenciones) el 11/11/2013 19:11:42
Gracias por contestar.

Lo he cambiado tal y como expones y sigue ocurriendo lo mismo.
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 xve
Val: 3.162
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

modificar varias imágenes

Publicado por xve (2100 intervenciones) el 11/11/2013 20:31:09
Hola Manuel, mil perdones, me lie... vi que estaba mal, y pense que era ese el problema.

Prueba este código, lo he modificado un poco bastante...

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
<html>
    <head>
    <script language="javascript">
 
        imagen1=new Image
        imagen1.src="b.png"
        imagen2=new Image
        imagen2.src="br.png"
        imagen3=new Image
        imagen3.src="n.png"
        imagen4=new Image
        imagen4.src="nr.png"
 
        var a=new Array(8);
 
        for(var i=0;i<=8;i++)
        {
            a[i]=Array(8);
            for(var j=0;j<=8;j++)
            {
                a[i][j]="0";
            }
        }
 
        function cambiar(i,j)
        {
            imgName="img"+String(i)+String(j);
            if (a[i][j]==0)
            {
                a[i][j]="1";
                document.images[imgName].src=imagen2.src;
            }else{
                a[i][j]="0";
                document.images[imgName].src=imagen1.src;
            }
        }
        function cambiar2(i,j)
        {
            imgName="img"+String(i)+String(j);
            if (a[i][j]==0)
            {
                a[i][j]="1";
                document.images[imgName].src=imagen4.src;
            }else{
                a[i][j]="0";
                document.images[imgName].src=imagen3.src;
            }
        }
    </script>
    </head>
    <body>
<?php
for ($i=0;$i<8;$i++)
{
    for ($j=0;$j<8;$j++)
    {
        if (($i-$j)%2==0)
        {
            echo "<img src='b.png' id='img".$i.$j."' onMousedown=\"cambiar(".$i.",".$j.")\">";
        }else{
            echo "<img src='n.png' id='img".$i.$j."' onMousedown=\"cambiar2(".$i.",".$j.")\">";
        }
    }
    echo "<br>";
}
?>
</body>
</html>

Pone las rutas de tus imágenes...

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
0
Comentar
sin imagen de perfil

modificar varias imágenes

Publicado por Manuel (5 intervenciones) el 11/11/2013 21:20:29
Perfecto, es exactamente lo que quería. 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
sin imagen de perfil

modificar varias imágenes

Publicado por Manuel (5 intervenciones) el 12/11/2013 15:30:18
Bueno, ahora quiero ponerle las condiciones para que me deje rellenar la casilla, pero ha dejado de modificarse la imagen. Supongo que algo estaré haciendo mal...

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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<html>
	<head>
	<link href="css/estilo.css" rel="stylesheet" type="text/css"/>
	<script language="javascript">
		imagen1=new Image
		imagen1.src="imgs/casillab.jpg"
		imagen2=new Image
		imagen2.src="imgs/casillabr.jpg"
		imagen3=new Image
		imagen3.src="imgs/casillan.jpg"
		imagen4=new Image
		imagen4.src="imgs/casillanr.jpg"
 
		// Creamos una matriz que almacenará si esa casilla está ocupada o no.

 
		var a=new Array(8);
		for(var i=0;i<8;i++) {
			a[i]=Array(8);
			for(var j=0;j<8;j++)
				{ a[i][j]="0"; } } // Todos comienzan a 0, es decir, 0 es no estar ocupada.

 
 
		// Creamos dos vectores que almacenarán si esa diagonal está ocupada.

 
		var cdiagd=new Array(15);
		var cdiagi=new Array(15);
 
		// Ambos los inicializamos a 0, es decir, 0 es no estar ocupada.

		for (var p=0;p<15;p++)
			{
			cdiagd[p]=0;
			cdiagd[i]=0;
			}
 
 
		// Si pulsamos en una casilla blanca se ejecuta la siguiente función.

 
		function cambiar(i,j)
			{
			imgName="img"+String(i)+String(j);
 
			// Si la casilla es 0, no está ocupada.

			if (a[i][j]==0)
					{
					// Si la casilla no está ocupada, comprobamos si se puede ocupar.

					// Si se puede ocupar se cambia la imagen y se establece el valor de la matríz de ocupación en 1.

					if (comprueba(i,j)==0)
						{
						a[i][j]="1";
						document.images[imgName].src=imagen2.src;
						}
 
					// Si no se puede ocupar mostramos que no se puede.

					else
						{
						document.write["No se puede colocar ahí"];
						}
					}
 
			// Si la casilla no es 0, está ocupada, por lo que la vaciamos.

 
			else
					{
					a[i][j]="0";
					document.images[imgName].src=imagen1.src;
					}
 
			}
 
 
		// Si pulsamos en una casilla negra se ejecuta la siguiente función.

 
		function cambiar2(i,j) {
 
				imgName="img"+String(i)+String(j);
 
				// Si la casilla es 0, no está ocupada.

				if (a[i][j]==0)
					{
					// Si la casilla no está ocupada, comprobamos si se puede ocupar.

					// Si se puede ocupar se cambia la imagen y se establece el valor de la matríz de ocupación en 1.

					if (comprueba(i,j)==0)
						{a[i][j]="1";
						document.images[imgName].src=imagen4.src;
						}
 
					// Si no se puede ocupar mostramos que no se puede.

					else
						{
						document.write["No se puede colocar ahí"];
						}
					}
				// Si la casilla no es 0, está ocupada, por lo que la vaciamos.

				else
					{
					a[i][j]="0";
					document.images[imgName].src=imagen3.src;
					}
 
		// Comprueba si se puede colocar en esa posición

		function comprueba(i,j)
			{
			var z=0;
 
			// Comprueba tanto filas como columnas.

			for (var m=0;m<8;m++)
				{
				if (a[i][m]==1 or a[m][j]==1)
					{
					z=1;
					}
				}
			var diagd= i-j+7;
			var diagi= i+j;
 
			// Compruebo las diagonales.

			if (cdiagd[diagd]==1)
				{
				z=1;
				}
			else
				{
				cdiagd[diagd]=1;
				}
			if (cdiagi[diagi]==1)
				{
				z=1;
				}
			else
				{
				cdiagi[diagi]=1;
				}
 
			return z;
			}
		</script>
	</head>
	<body>
		<?php
			for ($i=0;$i<8;$i++)
				{
				for ($j=0;$j<8;$j++)
					{
					if (($i-$j)%2==0) {
						echo "<img src='imgs/casillab.jpg' id='img".$i.$j."' onMousedown=\"cambiar(".$i.",".$j.")\">"; }
					else{
						echo "<img src='imgs/casillan.jpg' id='img".$i.$j."' onMousedown=\"cambiar2(".$i.",".$j.")\">"; }
					}
					echo "<br>";
				}
		?>
	</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
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

modificar varias imágenes

Publicado por xve (2100 intervenciones) el 12/11/2013 16:59:40
Tienes un error en el código



Nos podrías adjuntar las imágenes? es un poco complicado de revisar-lo, ya que no disponemos de ellas...
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

modificar varias imágenes

Publicado por Manuel (5 intervenciones) el 27/11/2013 09:54:13
Gracias por la ayuda, aun no lo he conseguido solucionar, aquí adjunto las imágenes.
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