Problema con JavaScript

ersocio · #1 (**permalink**) 16/04/2008, 11:16

Hola! soy un novato total en JavaScript y quería, si fuese posible, q me echasen una mano con una cosita que me traigo entre manos.

Os explico: tengo 3 imagencitas q son 3 <inputs type="button"> y cada una tiene un value distinto, bien, si nos centramos en uno solo de los inputs yo lo que quiero es q mediante una función de JavaScript al hacer uso del OnClick en el susodicho input me cambie el value de ese input y la imagen de fondo. Os muestro mi código:

//esto está en el <head>

<script languaje="javascript">
function tapa1(){
if (partido1.bt1.value=='1'){
partido1.bt1.value='0';
}
else {
partido1.bt1.value='1';
}
}
</script>

//y ahora lo q está en el <body>

<td class="estilotd3">
<form name="partido1">
<input type="button" name="bt1" value="1" onClick="tapa1()">
<input type="button" name="btx" value="X" onClick="tapa1()">
<input type="button" name="bt2" value="2" onClick="tapa1()">
</form>
</td>

Así es como lo tengo y no funciona, el value no lo cambia. La imagen de fondo está definida en "estilotd3" y eso si que NO SE como hacer pa que cambie al hacer OnClick .... como ven estoy sumido en la ignorancia y en la desesperación

Si me ayudan a hacer esto os compro un Poni xDDD
Muchísimas gracias a todos

JavierB · #2 (**permalink**) 16/04/2008, 11:24

Hola ersocio

Hay algo cosas que no entiendo ¿Quieres poner siempre el value del botón pulsado a cero?

Saludos,

ersocio · #3 (**permalink**) 16/04/2008, 11:29

no, el cero es simplemente un ejemplo, quiero q cambie de valor unicamente al pulsar y sobre todo la imagen de background, pero el value al que cambie me es indiferente.

Me acabo de dar cuenta de que en IE7 si cambia el value mientras que en Mozilla Firefox no lo hace

¿¿y ahora que??

Desesperacion ....

JavierB · #4 (**permalink**) 16/04/2008, 11:43

Hola de nuevo.

A ver si te sirve:

Código:

<td id="im" class="estilotd3">
<form name="partido1">
<input type="button" name="bt1" value="1" onclick="tapa1(this,0)">
<input type="button" name="btx" value="X" onclick="tapa1(this,1)">
<input type="button" name="bt2" value="2" onclick="tapa1(this,2)">
</form>

Código:

<script type="text/javascript">
var imagenes = ['imagen1.jpg','imagen2.jpg','imagen3.jpg']
function tapa1(obj,num) {
  obj.value = 0; 
  document.getElementById('im').style.background = 'url(' + imagenes[num] + ')';
}
</script>

Saludos,

Luego te doy mi dirección postal, para que me mandes el poni. Mi sobrinito se va a poner muy contento

ersocio · #5 (**permalink**) 17/04/2008, 03:35

Muchisimas gracias :D me ha ayudado pero aun así no consigue hacer lo q busco. Os voy a contar mi problema completo para ver si así puedo llegar a buen puerto. El rollo es el siguiente:

Estoy haciendo una web en la cual se hacen quinielas de la liga española, entonces mi web tiene quinielas con este estilo:

es una tablita que en el último <td> tiene definido este estilo:

Código HTML:

.estilotd3{
	background-color:#FF9F95;
	
}

	/* ------ Dentro de .estilotd3 -----------*/
	input{
		color:#C33A22;
		font-size:9px;
		width:12px;
		height:14px;
		border-style:none;
		background-color:#FF9F95;
		background-image:url('imagenes/vacio.jpg');
		background-repeat:no-repeat;
	}

cada numerito es un <input type="button"> con un estilo como el de arriba, como veis el input tiene un background con una imagen como esta:

el numerito que aparece es consecuencia del Value que tiene ese button

Entonces, lo que yo quiero es que cuando se pulse encima de uno de los numeritos de la quiniela se tache mediante esta imagen:

de forma q además solo se pueda tachar uno de los 3, es decir, digamos q busco la funcion de un <input type="radio"> pero con las imágenes q yo he hecho.

A ver que se os ocurre pq yo ya llevo 2 semanas con esto y me estoy volviendo loco ya, es para un proyecto q tengo q entregar y estoy ahí atrancao. Ya os digo... soy un novatísimo con JavaScript y creo que solo JavaScript es lo que puede ayudarme.
Muchisimas gracias a todos.

crujikoki · #6 (**permalink**) 17/04/2008, 03:51

Hola,
Creo que te estás complicando la vida.

Por lo que yo he entendido solo quieres hacer quinielas simple, sin dobles ni triples. En ese caso yo haría lo siguiente:

Primero permitiría que se rellene toda la quiniela y con el onClick cambiaria la imagen como tu quieres hacer, PERO SIN CAMBIAR EL VALUE de la opción.

Luego, en cuanto hagas un submit, o aceptar, o lo que sea que envie la quiniela donde sea, es cuando yo haría el recuento y lo haría por filas. Es importante que no cambies el value de las opciones por que así te será más fácil hacer el recuento.

Si pones el HTML con el script a lo mejor te puedo hechar un cable.

ersocio · #7 (**permalink**) 17/04/2008, 12:35

Venga venga .. de arte, a ver.. te voy a poner el html que he usado y el script con la solución q me dieron un poco más arriba (que no acaba de funcionar supongo q será por los temas de estilos) si te hace falta te paso también el css, tu me dices, ahi va:

Código HTML:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="eng">
<head>
	<link rel="stylesheet" type="text/css" href="css/estiloQuiniela.css">
	<script type="text/javascript">
		var imagenes = ['css/imagenes/tachado.jpg','css/imagenes/tachado.jpg','css/imagenes/tachado.jpg']
		function tapa1(obj,num) {
			obj.value = '.'; 
			document.getElementById('im').style.background = 'url(' + imagenes[num] + ')';
		}
	</script>
</head>

<body>
	<div id="contenedor">
		<div id="cuerpo">
			<div id="bloqueDer">
				<div id="bloqueQuiniTuya">
					Tu Quiniela - Jornada 38
					<table frame="above">
						<tr>
							<td class="estilotd1">Almeria - Villarreal</td>
							<td class="estilotd2">1</td>
							<td id="im" class="estilotd3">
								<form name="partido1">
									<input type="button" name="bt1" value="1" onClick="tapa1(this,0)">
									<input type="button" name="btx" value="X" onClick="tapa1(this,1)">
									<input type="button" name="bt2" value="2" onClick="tapa1(this,2)">
								</form>
							</td>						
						</tr>
		
						<tr>
							<td class="estilotd1">Valladolid - At. Madrid</td>
							<td class="estilotd2">2</td>
							<td class="estilotd3">
								<img src="css/imagenes/uno.jpg">
								<img src="css/imagenes/equis.jpg">
								<img src="css/imagenes/dos.jpg">			
							</td>
						</tr>
		
						<tr>
							<td class="estilotd1">Betis - Levante</td>
							<td class="estilotd2">3</td>
							<td class="estilotd3">
								<img src="css/imagenes/uno.jpg">
								<img src="css/imagenes/equis.jpg">
								<img src="css/imagenes/dos.jpg">
							</td>
						</tr>
		
						<tr>
							<td class="estilotd1">Getafe - Zaragoza</td>
							<td class="estilotd2">4</td>
							<td class="estilotd3">
								<img src="css/imagenes/uno.jpg">
								<img src="css/imagenes/equis.jpg">
								<img src="css/imagenes/dos.jpg">
							</td>
						</tr>
					</table>

					<table frame="above">
						<tr>
							<td class="estilotd1">Recreativo - Barcelona</td>
							<td class="estilotd2">5</td>
							<td class="estilotd3">
								<img src="css/imagenes/uno.jpg">
								<img src="css/imagenes/equis.jpg">
								<img src="css/imagenes/dos.jpg">
							</td>
						</tr>
		
						<tr>
							<td class="estilotd1">Espanyol - Osasuna</td>
							<td class="estilotd2">6</td>
							<td class="estilotd3">
								<img src="css/imagenes/uno.jpg">
								<img src="css/imagenes/equis.jpg">
								<img src="css/imagenes/dos.jpg">
							</td>
						</tr>
	
						<tr>
							<td class="estilotd1">Deportivo - Atl. Club</td>
							<td class="estilotd2">7</td>
							<td class="estilotd3">
								<img src="css/imagenes/uno.jpg">
								<img src="css/imagenes/equis.jpg">
								<img src="css/imagenes/dos.jpg">
							</td>
						</tr>
		
						<tr>
							<td class="estilotd1">Valencia - Racing</td>
							<td class="estilotd2">8</td>
							<td class="estilotd3">
								<img src="css/imagenes/uno.jpg">
								<img src="css/imagenes/equis.jpg">
								<img src="css/imagenes/dos.jpg">
							</td>
						</tr>
					</table>
	
					<table frame="above">
						<tr>
							<td class="estilotd1">R.Madrid - Murcia</td>
							<td class="estilotd2">9</td>
							<td class="estilotd3">
								<img src="css/imagenes/uno.jpg">
								<img src="css/imagenes/equis.jpg">
								<img src="css/imagenes/dos.jpg">
							</td>
						</tr>
		
						<tr>
							<td class="estilotd1">Hercules - Castellon</td>
							<td class="estilotd2">10</td>
							<td class="estilotd3">
								<img src="css/imagenes/uno.jpg">
								<img src="css/imagenes/equis.jpg">
								<img src="css/imagenes/dos.jpg">
							</td>
						</tr>
		
						<tr>
							<td class="estilotd1">Salamanca - Las Palmas</td>
							<td class="estilotd2">11</td>
							<td class="estilotd3">
								<img src="css/imagenes/uno.jpg">
								<img src="css/imagenes/equis.jpg">
								<img src="css/imagenes/dos.jpg">
							</td>
						</tr>
					</table>
	
					<table frame="hsides">
						<tr>
							<td class="estilotd1">Cadiz - Albacete</td>
							<td class="estilotd2">12</td>
							<td class="estilotd3">
								<img src="css/imagenes/uno.jpg">
								<img src="css/imagenes/equis.jpg">
								<img src="css/imagenes/dos.jpg">
							</td>
						</tr>
		
						<tr>
							<td class="estilotd1">Malaga - Sporting</td>
							<td class="estilotd2">13</td>
							<td class="estilotd3">
								<img src="css/imagenes/uno.jpg">
								<img src="css/imagenes/equis.jpg">
								<img src="css/imagenes/dos.jpg">
							</td>
						</tr>
			
						<tr>
							<td class="estilotd1">Celta - R.Sociedad</td>
							<td class="estilotd2">14</td>
							<td class="estilotd3">
								<img src="css/imagenes/uno.jpg">
								<img src="css/imagenes/equis.jpg">
								<img src="css/imagenes/dos.jpg">
							</td>
						</tr>
					</table>
				
					<table frame="hsides">
						<tr>
							<td class="estilotd1">Mallorca - Sevilla</td>
							<td class="estilotd2">15</td>
							<td class="estilotd3">
								<img src="css/imagenes/uno.jpg">
								<img src="css/imagenes/equis.jpg">
								<img src="css/imagenes/dos.jpg">
							</td>
						</tr>
					</table>
				</div>
				
			</div>
		</div>
	</div>
</body>
</html>

También tengo q comentar que los partidos que aparecen en la quiniela (en el primer <td>) se cargarán mediante JSP, es decir, las entrañas de la web son en Java, por si ese detalle sirve de algo xD

Bueno... pos ahí esta la cosa.... si se os ocurre algo ... ayudadme plis.

crujikoki · #8 (**permalink**) 18/04/2008, 07:45

Hola,

Mira a ver si esto es lo que quieres:

Código PHP:

  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="eng"> 
<head> 
    <link rel="stylesheet" type="text/css" href="css/estiloQuiniela.css"> 
    <script type="text/javascript"> 
         
        function isChecked(obj) 
        { 
            var otroMarcado = false; 
             
            casillas = document.getElementsByName(obj.name); 
             
            for(i=0; i < casillas.length; i++) 
            { 
                if(casillas[i].value != obj.value) 
                { 
                    if(casillas[i].checked) 
                    { 
                        otroMarcado = true; 
                    } 
                } 
            } 
            if(otroMarcado) 
            { 
                obj.checked = false; 
            } 
        } 
         
    </script> 
</head> 
 
<body> 
    <div id="contenedor"> 
        <div id="cuerpo"> 
            <div id="bloqueDer"> 
                <div id="bloqueQuiniTuya"> 
                    Tu Quiniela - Jornada 38 <img style="margin-left:20px;" src="partido.jpg"/> 
                    <table frame="above"> 
                        <tr> 
                            <td class="estilotd1">Almeria - Villarreal</td> 
                            <td class="estilotd2">1</td> 
                            <td id="im" class="estilotd3"> 
                                <input type="checkbox" id="partido1" name="partido1" value="1" onClick="isChecked(this)"> 
                                <input type="checkbox" id="partido1" name="partido1" value="X" onClick="isChecked(this)"> 
                                <input type="checkbox" id="partido1" name="partido1" value="2" onClick="isChecked(this)"> 
                            </td>                         
                        </tr> 
                        <tr> 
                            <td class="estilotd1">Valladolid - At. Madrid</td> 
                            <td class="estilotd2">2</td> 
                            <td class="estilotd3"> 
                                <input type="checkbox" id="partido2" name="partido2" value="1" onClick="isChecked(this)"> 
                                <input type="checkbox" id="partido2" name="partido2" value="X" onClick="isChecked(this)"> 
                                <input type="checkbox" id="partido3" name="partido2" value="2" onClick="isChecked(this)">             
                            </td> 
                        </tr> 
                        <tr> 
                            <td class="estilotd1">Betis - Levante</td> 
                            <td class="estilotd2">3</td> 
                            <td class="estilotd3"> 
                                <input type="checkbox" id="partido3" name="partido3" value="1" onClick="isChecked(this)"> 
                                <input type="checkbox" id="partido3" name="partido3" value="X" onClick="isChecked(this)"> 
                                <input type="checkbox" id="partido3" name="partido3" value="2" onClick="isChecked(this)">     
                            </td> 
                        </tr> 
                        <tr> 
                            <td class="estilotd1">Getafe - Zaragoza</td> 
                            <td class="estilotd2">4</td> 
                            <td class="estilotd3"> 
                                <input type="checkbox" id="partido4" name="partido4" value="1" onClick="isChecked(this)"> 
                                <input type="checkbox" id="partido4" name="partido4" value="X" onClick="isChecked(this)"> 
                                <input type="checkbox" id="partido4" name="partido4" value="2" onClick="isChecked(this)">     
                            </td> 
                        </tr> 
                    </table> 
                    <table frame="above"> 
                        <tr> 
                            <td class="estilotd1">Recreativo - Barcelona</td> 
                            <td class="estilotd2">5</td> 
                            <td class="estilotd3"> 
                                <input type="checkbox" id="partido5" name="partido5" value="1" onClick="isChecked(this)"> 
                                <input type="checkbox" id="partido5" name="partido5" value="X" onClick="isChecked(this)"> 
                                <input type="checkbox" id="partido5" name="partido5" value="2" onClick="isChecked(this)">     
                            </td> 
                        </tr> 
                        <tr> 
                            <td class="estilotd1">Espanyol - Osasuna</td> 
                            <td class="estilotd2">6</td> 
                            <td class="estilotd3"> 
                                <input type="checkbox" id="partido6" name="partido6" value="1" onClick="isChecked(this)"> 
                                <input type="checkbox" id="partido6" name="partido6" value="X" onClick="isChecked(this)"> 
                                <input type="checkbox" id="partido6" name="partido6" value="2" onClick="isChecked(this)">     
                            </td> 
                        </tr> 
                        <tr> 
                            <td class="estilotd1">Deportivo - Atl. Club</td> 
                            <td class="estilotd2">7</td> 
                            <td class="estilotd3"> 
                                <input type="checkbox" id="partido7" name="partido7" value="1" onClick="isChecked(this)"> 
                                <input type="checkbox" id="partido7" name="partido7" value="X" onClick="isChecked(this)"> 
                                <input type="checkbox" id="partido7" name="partido7" value="2" onClick="isChecked(this)">     
                            </td> 
                        </tr> 
                        <tr> 
                            <td class="estilotd1">Valencia - Racing</td> 
                            <td class="estilotd2">8</td> 
                            <td class="estilotd3"> 
                                <input type="checkbox" id="partido8" name="partido8" value="1" onClick="isChecked(this)"> 
                                <input type="checkbox" id="partido8" name="partido8" value="X" onClick="isChecked(this)"> 
                                <input type="checkbox" id="partido8" name="partido8" value="2" onClick="isChecked(this)">     
                            </td> 
                        </tr> 
                    </table> 
                    <table frame="above"> 
                        <tr> 
                            <td class="estilotd1">R.Madrid - Murcia</td> 
                            <td class="estilotd2">9</td> 
                            <td class="estilotd3"> 
                                <input type="checkbox" id="partido9" name="partido9" value="1" onClick="isChecked(this)"> 
                                <input type="checkbox" id="partido9" name="partido9" value="X" onClick="isChecked(this)"> 
                                <input type="checkbox" id="partido9" name="partido9" value="2" onClick="isChecked(this)">     
                            </td> 
                        </tr> 
                        <tr> 
                            <td class="estilotd1">Hercules - Castellon</td> 
                            <td class="estilotd2">10</td> 
                            <td class="estilotd3"> 
                                <input type="checkbox" id="partido10" name="partido10" value="1" onClick="isChecked(this)"> 
                                <input type="checkbox" id="partido10" name="partido10" value="X" onClick="isChecked(this)"> 
                                <input type="checkbox" id="partido10" name="partido10" value="2" onClick="isChecked(this)">     
                            </td> 
                        </tr> 
                        <tr> 
                            <td class="estilotd1">Salamanca - Las Palmas</td> 
                            <td class="estilotd2">11</td> 
                            <td class="estilotd3"> 
                                <input type="checkbox" id="partido11" name="partido11" value="1" onClick="isChecked(this)"> 
                                <input type="checkbox" id="partido11" name="partido11" value="X" onClick="isChecked(this)"> 
                                <input type="checkbox" id="partido11" name="partido11" value="2" onClick="isChecked(this)">     
                            </td> 
                        </tr> 
                    </table> 
                    <table frame="hsides"> 
                        <tr> 
                            <td class="estilotd1">Cadiz - Albacete</td> 
                            <td class="estilotd2">12</td> 
                            <td class="estilotd3"> 
                                <input type="checkbox" id="partido12" name="partido12" value="1" onClick="isChecked(this)"> 
                                <input type="checkbox" id="partido12" name="partido12" value="X" onClick="isChecked(this)"> 
                                <input type="checkbox" id="partido12" name="partido12" value="2" onClick="isChecked(this)">     
                            </td> 
                        </tr> 
                        <tr> 
                            <td class="estilotd1">Malaga - Sporting</td> 
                            <td class="estilotd2">13</td> 
                            <td class="estilotd3"> 
                                <input type="checkbox" id="partido13" name="partido13" value="1" onClick="isChecked(this)"> 
                                <input type="checkbox" id="partido13" name="partido13" value="X" onClick="isChecked(this)"> 
                                <input type="checkbox" id="partido13" name="partido13" value="2" onClick="isChecked(this)">     
                            </td> 
                        </tr> 
                        <tr> 
                            <td class="estilotd1">Celta - R.Sociedad</td> 
                            <td class="estilotd2">14</td> 
                            <td class="estilotd3"> 
                                <input type="checkbox" id="partido14" name="partido14" value="1" onClick="isChecked(this)"> 
                                <input type="checkbox" id="partido14" name="partido14" value="X" onClick="isChecked(this)"> 
                                <input type="checkbox" id="partido14" name="partido14" value="2" onClick="isChecked(this)">     
                            </td> 
                        </tr> 
                    </table> 
                 
                    <table frame="hsides"> 
                        <tr> 
                            <td class="estilotd1">Mallorca - Sevilla</td> 
                            <td class="estilotd2">15</td> 
                            <td class="estilotd3"> 
                                <input type="checkbox" id="partido15" name="partido15" value="1" onClick="isChecked(this)"> 
                                <input type="checkbox" id="partido15" name="partido15" value="X" onClick="isChecked(this)"> 
                                <input type="checkbox" id="partido15" name="partido15" value="2" onClick="isChecked(this)">     
                            </td> 
                        </tr> 
                    </table> 
                </div> 
                 
            </div> 
        </div> 
    </div> 
</body> 
</html>

En lugar de imágenes, he puesto checkbox que bueno, creo que pal caso es lo mismo. Si eso es lo que quieres hacer, en el script solo tienes que añadir que cambie la imagen. En lugar de hacer obj.checked = true; haces visible l imagen que quieras.

ersocio · #9 (**permalink**) 18/04/2008, 17:11

Muy bien tio!!! :D esto si es lo q yo queria!! :D Muchisimas gracias, que crack!!! lo que no entiendo muy bien es lo que dices de las imagenes, perdona por mi ignorancia pero .... si en vez de que aparezca la cajita con el "tic" para marcar quiero que aparezcan mis imágenes ... qué tendría q poner?? obj.checked = "mi_imagen";??

usea ... algo asi?? :

Código PHP:

  <script type="text/javascript"> 
         
        function isChecked(obj) 
        { 
            var otroMarcado = false; 
             
            casillas = document.getElementsByName(obj.name); 
             
            for(i=0; i < casillas.length; i++) 
            { 
                if(casillas[i].value != obj.value) 
                { 
                    if(casillas[i].checked) 
                    { 
                        otroMarcado = true; 
                    } 
                } 
            } 
            if(otroMarcado) 
            { 
                obj.checked = "Mi_imagen"; 
            } 
        } 
         
    </script>

perdon por la insistencia tio pero es q es la primera vez q hago esto xD y la verdad es q se parece mucho a Java pero como en java tampoco he hecho referencias a imágenes ni na de eso ....
Muchisimas gracias de nuevo.

crujikoki · #10 (**permalink**) 19/04/2008, 08:14

De nada, pa eso estamos!

No me refiero a eso, me refiero que en lugar de poner 3 checkbox por fila pongas tus tres imágenes correspondientes al 1 x 2. Entonces añades el evento onclick llamando a la función que controle que imágen está cargada en ese momento.

Osea el equivalente que he hecho yo de mirar si alguno de los checkbox está marcado, tu tendrias que mirar que imágenes estás mostrando en ese momento, y si alguna de ellas es

pues aplicas el mismo criterio que he aplicado yo.

Me he explicado?

ersocio · #11 (**permalink**) 20/04/2008, 08:30

Ajam, ok ok, he entendido tu idea, pero no soy capaz de llevarla a la práctica, no se como controlar qué imagen se está usando, he hecho una cosa así basándome en tu código, pero no funciona, mira:

Código PHP:

          function esLaImagen(obj) 
        { 
            var otroMarcadoUno = "css/imagenes/uno.jpg"; 
            var otroMarcadoEquis = "css/imagenes/equis.jpg"; 
            var otroMarcadoDos = "css/imagenes/dos.jpg"; 
             
            casillas = document.getElementsByName(obj.src); 
             
            for(i=0; i < casillas.length; i++) 
            { 
                if(casillas[i].src != obj.src) 
                { 
                    if(casillas[i].checked) 
                    { 
                        otroMarcadoUno = "css/imagenes/tachado.jpg"; 
                    } 
                } 
            } 
            if(otroMarcado) 
            { 
                obj.checked = false; 
            } 
        }

el obj.checked corresponde al input y no sé qué seria su equivalente en <img>
A ver... es q la idea es q la imagen q está cargada en ese momento tenga algún tipo de identificador, yo habia pensao en el "src" que es el q da la ruta, entonces al clicar se tiene q cambiar por "tachado.jpg" y las demás imagenes no podrian tener el "tachado.jpg" al mismo tiempo. Es tal y como has hecho tu con checkbox pero con mis imágenes. Mi problema es que no sé como referirme a la imagen en el script y hacer que se sepa cuándo se está usando una u otra porque ... digamos q tenemos 3 imagenes distintas en estado normal, el uno.jpg, el equis.jpg y el dos.jpg y queremos q según donde clique de esas 3 se ponga un "tachado.jpg" en una y solo una de ellas, vuelvo a repetir ... lo q has hecho tu xD pero con mis imágenes. Vaya pitote q te estoy montando xDD
Resumiendo... q no tengo ni idea de como hacerlo con mis imágenes xD
Muchisimas gracias de nuevo por aguantarme

crujikoki · #12 (**permalink**) 21/04/2008, 07:43

Hola,

Vamos a ver, voy a suponer que has cambiado los checkbox por las imagenes ya. Y si no lo has hecho hazlo pero poniendolos de la siguiente manera:

Cambia esto:

Código PHP:

  <input type="checkbox" id="partido1" name="partido1" value="1" onClick="isChecked(this)"/>

Por esto:

Código PHP:

  <img id="imagen1" name="partido1" src="tuImagen.jpg" onClick="esLaImagen(this)"/>

Es importante que para que el script tal y como está los <img> tengan el name igual a su respectivo partido. Así que los 3 del partido 1 tendrán el name="partido1", los 3 del partido 2 tendrán el name="partido2".

Una ves hecho eso, tienes que rehacer el script con la idea que has planteado (que es la correcta) pero con como lo has hecho.
El que has rehecho tu no funciona por esto casillas = document.getElementsByName(obj.src);.

Esta sería la solución:

Código PHP:

  <script type="text/javascript">  
function esLaImagen(obj)  
{ 
    var Uno = "file:///C:/blue_MarkerA.png";  
  var Equis = "file:///C:/blue_MarkerB.png";  
  var Dos = "file:///C:/blue_MarkerC.png"; 
  var Tachado = "file:///C:/brown_MarkerA.png"; 
  var otroMarcado = false; 
              
  casillas = document.getElementsByName(obj.name);  
 
  if(obj.src == Tachado) 
  { 
      if(obj.id == "imagen1") 
    { 
        obj.src = Uno; 
       } 
    else if(obj.id == "imagen2") 
        { 
            obj.src = Equis; 
      } 
      else if(obj.id == "imagen3") 
        { 
            obj.src = Dos; 
        } 
  } 
  else 
  { 
      for(i=0; i < casillas.length; i++)  
         {  
             if(casillas[i].id != obj.id)  
           { 
               if(casillas[i].src == Tachado)  
             { 
                 otroMarcado = true;  
             }  
           }  
         }  
         if(otroMarcado == false)  
         { 
             obj.src = Tachado;  
         } 
  }  
}   
</script>

Las imágenes que he puesto son unas que tenía por aquí para probar.

Tengo que decirte un par de cosillas más:

1. Como ya te he dicho tendrás que poner en cada partido algo así:

Código PHP:

  <img id="imagen1" name="partido1" src="C:/blue_MarkerA.png" onClick="esLaImagen(this)"/> 
<img id="imagen2" name="partido1" src="C:/blue_MarkerB.png" onClick="esLaImagen(this)"/> 
<img id="imagen3" name="partido1" src="C:/blue_MarkerC.png" onClick="esLaImagen(this)"/>

Es importante que sigas el patrón en cada partido. Lo único que tienes que hacer es copiar eso en cada partido y cambiar el name por el que toque.

2. Verás que en el script he tenido que poner delante de las rutas file:///. Sino lo ponía el script no tiraba y no te se decir el porque.

ersocio · #13 (**permalink**) 21/04/2008, 09:10

Vale tio, muy bien :D lo he hecho y funciona, aunq todavía hay un pero

1. Se trata de que cuando se queda en "tachado" y se le vuelve a picar no cambia a la imagen de partida, se queda permanentemente en "tachado"

2. Luego, otra historia es q puedes tachar el "1", la "X", y el "2" a la vez (cosa que no quiero pq no quiero ni dobles ni triples). No se tio, he estao mirando el código y es como sino entrara nunca en el "else" último... es raro

Mira, te voy a poner lo q tengo puesto para q veas que no he tocao na raro y es exactamente lo que tu me has dicho:

Código PHP:

          function esLaImagen(obj){
            var Uno = "css/imagenes/uno.jpg"; 
            var Equis = "css/imagenes/equis.jpg"; 
            var Dos = "css/imagenes/dos.jpg";
            var Tachado = "css/imagenes/tachado.jpg";
            var otroMarcado = false;
             
            casillas = document.getElementsByName(obj.name); 

            if(obj.src == Tachado){
                if(obj.id == "imagen1"){
                    obj.src = Uno;
                }
                else if(obj.id == "imagen2"){
                    obj.src = Equis;
                }
                else if(obj.id == "imagen3"){
                    obj.src = Dos;
                }
            }
            else{
                for(i=0; i < casillas.length; i++) { 
                    if(casillas[i].id != obj.id){
                        if(casillas[i].src == Tachado){
                            otroMarcado = true; 
                        }     
                    } 
                } 
                if(otroMarcado == false){
                    obj.src = Tachado; 
                }
            } 
        }

Y en el html:

Código HTML:

<img id="imagen1" name="partido1" src="css/imagenes/uno.jpg" onClick="esLaImagen(this)"/>
<img id="imagen2" name="partido1" src="css/imagenes/equis.jpg" onClick="esLaImagen(this)"/>
<img id="imagen3" name="partido1" src="css/imagenes/dos.jpg" onClick="esLaImagen(this)"/>

3. Otra cosa: lo que me has dicho del file:/// yo lo he tenido que quitar pq a mi con eso si que no me funcionaba, lo he quitao y si tira :D no se pq será.

Atento:

Lo que está tachado no hay manera de "destacharlo" xD y se puede tachar las 3 casillas a la vez, cosa que no puede ser en mi proyecto, (que si sigue asi dentro de poco será nuestro jajaja) :D

Muchisimas gracias artista, cuando esto tire te voy a invitar a cervezas hasta que te quedes ciego xDDD
Un saludo

crujikoki · #14 (**permalink**) 21/04/2008, 14:35

Hola,

Pues no se que habrás hecho, pero tal y como te lo he pasado a mi me funciona perfecto. Incluido los fallos que mencionas en tu último post me funciona todo.

Haz una cosa, pon un alert del src de la imagen sobre la que has clicado y mira a ver que te sale. Osea, haz esto:

Código PHP:

          function esLaImagen(obj){ 
             alert(obj.src); 
            /*var Uno = "css/imagenes/uno.jpg";  
            var Equis = "css/imagenes/equis.jpg";  
            var Dos = "css/imagenes/dos.jpg"; 
            var Tachado = "css/imagenes/tachado.jpg"; 
            var otroMarcado = false; 
              
            casillas = document.getElementsByName(obj.name);  
 
            if(obj.src == Tachado){ 
                if(obj.id == "imagen1"){ 
                    obj.src = Uno; 
                } 
                else if(obj.id == "imagen2"){ 
                    obj.src = Equis; 
                } 
                else if(obj.id == "imagen3"){ 
                    obj.src = Dos; 
                } 
            } 
            else{ 
                for(i=0; i < casillas.length; i++) {  
                    if(casillas[i].id != obj.id){ 
                        if(casillas[i].src == Tachado){ 
                            otroMarcado = true;  
                        }      
                    }  
                }  
                if(otroMarcado == false){ 
                    obj.src = Tachado;  
                } 
            } */ 
        }

Fíjate que he comentado el contenido de la función para que no se ejecute. Mira a ver que te sale en el alert y tal cual te salga ahí es el formato con el que tienes que poner las variables Uno. Equis, Dos y Tachado.
No se me ocurre otra cosa.

ersocio · #15 (**permalink**) 21/04/2008, 17:36

oks! voy a verlo, de todas formas ... mira, me puedes pasar los archivos y los .html q has usado tu que si q funcionan??? si a mi me funciona igual q a ti me dedicaré a modificar tu html con mis movidas ok? hacerlo sobre el tuyo. Es que ... si esto último q me has puesto no funcionase .... lo unico que se me ocurre es q mi html esté tan tocao ya q tenga restos de otras "posibles soluciones" u algo xD

Comprime lo tuyo y mándamelo a --> [email protected]

A ver si así pudiese ser q funcionase

Muchísimas gracias por la preocupación, se agradece mucho.

ersocio · #16 (**permalink**) 22/04/2008, 09:17

Tio, ya lo he solucionao, lo que fallaba era la ruta de las imágenes, seguí tu consejo del alert(obj.src) y así logré solucionarlo, pero mira el mamotreto q tengo q poner:

Código PHP:

  var Uno = "file:///C:/Documents%20and%20Settings/J.Antonio/Escritorio/espacio%20trabajo%20wapo/imagenes%20y%20dise%C3%B1o/archivos/css/imagenes/uno.jpg"; 
var Equis = "file:///C:/Documents%20and%20Settings/J.Antonio/Escritorio/espacio%20trabajo%20wapo/imagenes%20y%20dise%C3%B1o/archivos/css/imagenes/equis.jpg"; 
var Dos = "file:///C:/Documents%20and%20Settings/J.Antonio/Escritorio/espacio%20trabajo%20wapo/imagenes%20y%20dise%C3%B1o/archivos/css/imagenes/dos.jpg";
var Tachado = "file:///C:/Documents%20and%20Settings/J.Antonio/Escritorio/espacio%20trabajo%20wapo/imagenes%20y%20dise%C3%B1o/archivos/css/imagenes/tachado.jpg";
var otroMarcado = false;

Sin embargo, en el <html> con poner la ruta parcial es suficiente y funciona:

Código HTML:

<img id="imagen1" name="partido1" src="css/imagenes/uno.jpg" onClick="esLaImagen(this)"/>
<img id="imagen2" name="partido1" src="css/imagenes/equis.jpg" onClick="esLaImagen(this)"/>
<img id="imagen3" name="partido1" src="css/imagenes/dos.jpg" onClick="esLaImagen(this)"/>

El problema q tiene esto es q cuando se lo paso a mi compañero de proyecto .... no le funciona porque las rutas son completas, ¿qué solucion podría tener esto?

Otro asunto que te quería comentar, una vez rellenada la quiniela, cuando le de a "enviarla" ¿cómo hago para q envie un "1" cuando "tachado.jpg" esté sobre sobre "uno.jpg"?? entiendes lo q te quiero decir?? pq si se tratasen de <input type="checkbox"> tomarias el que estuviese "chequed", pero .. ¿y con las imágenes?

Muchísimas gracias, esto ya es lo único q me falta por saber para acabar por fin.
Gracias por todo.

crujikoki · #17 (**permalink**) 22/04/2008, 09:40

Hola,

Sobre lo de las rutas de tu compañero pues no se que decirte, aplica el mismo método que has usado para solucionar tu problema y ya está. eso es lo que haría yo (no se me ocurre otra cosa).

Y sobre lo de como saber que se ha tachado, pues muy fácil. Cuando te dije esto hace unos 3 o 4 posts:

Cita:

Tengo que decirte un par de cosillas más:

1. Como ya te he dicho tendrás que poner en cada partido algo así:

Código PHP:

Código PHP:

  <img id="imagen1" name="partido1" src="C:/blue_MarkerA.png" onClick="esLaImagen(this)"/>  
<img id="imagen2" name="partido1" src="C:/blue_MarkerB.png" onClick="esLaImagen(this)"/>  
<img id="imagen3" name="partido1" src="C:/blue_MarkerC.png" onClick="esLaImagen(this)"/>

Es importante que sigas el patrón en cada partido. Lo único que tienes que hacer es copiar eso en cada partido y cambiar el name por el que toque.

era precisamente por este motivo. Si te fijas, independientemente de en que partido te encuentres, cada una de las casillas tiene el mismo id pero en diferentes partidos. Así que lo que tendrás que hacer, es recorrer cada partido y mirar que id tiene el Tachado.jpg por imagen.
Si el id="imagen1" haces, por ejemplo numeroDeUnos ++;
Si el id="imagen2" haces, por ejemplo numeroDeEquis ++;
Si el id="imagen3" haces, por ejemplo numeroDeDoses ++;

Y al final sabrás que has marcado en cada quiniela.
Intenta hacer tu el código, y si no te sale pues ya nos lo miramos a ver.

ersocio · #18 (**permalink**) 29/04/2008, 08:48

Hola, perdón por la ausencia de estos dias pero es q he estado de exámenes y he tenido q aparcar esto unos dias, aún no me he puesto con el código que recoja los resultados de marcar la quiniela tal y como hemos estado haciendo, me pondré esta tarde o mañana así que ya tendrás noticias mias si esto no va xD
Mientras tanto usé una solución simple para que funcionase mi proyecto, cree un formulario compuesto por <inputs type="radio"> y al final un <input type="button">. Cuando le daba al button mediante un submit se enviaba y palante :D sin problemas; el caso es que queda feo y me descuadra mi web :s así que es necesario poder hacer ese código en javascript q recoja los resultados para asi poner en practica todo lo q hicimos más arriba.

Escribo esto simplemente para que se sepa que sigo liao con esto xD y que estoy ya deseando q rule xD
Muchisimas gracias de nuevo, estamos en contacto.

crujikoki · #19 (**permalink**) 30/04/2008, 01:29

Hola,

En mi último post, no se si te contesté lo que me pedias. Si aplicas mi respuesta lo que obtendrás será cuantos unos, equis y doses as obtenido en total, pero no en que partidos se tacharon.

Por ese motivo mirespuesta no es buena. Yo lo que haría sería crear un array de 15 posiciones (una para cada partido) y en cada posición guardar el resultado. De esta forma, en la posción 0 tendrás lo que se tachó en el primer partido, en la posición 1 lo que se tachó en el segundo, y así sucesivamente.

Ahora te hago yo una pregunta. ¿Los datos los mandas con un formulario y los lees en el PHP o usas AJAX?

ersocio · #20 (**permalink**) 30/04/2008, 02:21

En principio se mandan con un formulario, aunque ya hemos cambiado tantas cosas que estamos abiertos a cualquier posibilidad xD pero si, tal y como está hecho ahora mismo es mediante un formulario.

El resto del proyecto está hecho en Java, es decir, lo que recogería lo que manda el formulario es un método de Java al que se le pasaría cada elemento de ese array como parámetro. Una especie de setResultado("elemento del array"); y a partir de ahí se guardaría y se mostraría la quiniela del usuario.

No se si he respondido bien a tu pregunta, de todas formas no usamos ni PHP ni Ajax, estamos usando JSP y Java para el proyecto.

crujikoki · #21 (**permalink**) 30/04/2008, 03:21

Buffff

Pues en ese caso yo te puedo ayudar hasta aquí, ya que de JSP y java no tengo ni idea. Como mucho, si necesitas enviar los datos de una forma determinada te puedo decir como ponerlo si no lo sabes (y si lo se yo...), pero más no te podré ayudar. Lo siento.

ersocio · #22 (**permalink**) 30/04/2008, 03:51

Vale vale, no te preocupes, demasiado has hecho ya :D te estamos muy agradecidos.
Creo q ya he encontrado una solución a todo este marron, me queda escribir el codigo y comprobarlo, una vez q esté funcionando voy a poner aquí cómo se soluciona definitivamente todo esto para que el tema quede cerrao y todos con cara de gusto xD

Muchisimas gracias por tu ayuda artista, estate atento a mi proximo post que creo q esto va a funcionar :D

ersocio · #23 (**permalink**) 30/04/2008, 11:30

Bueno, pos esto está casi casi solucionao, te explico:

Al final no me ha hecho falta usar la funcion javascript que hiciste, únicamente con el OnClick he conseguido manejarme con las imágenes, te digo como lo he hecho:

Código HTML:

<td class="estilotd3">
<input type="hidden" name="p1" value="1">
<img src="archivos/css/imagenes/uno.jpg" name="Imagen1" onclick=Imagen1.src="archivos/css/imagenes/tachado.jpg";Imagen2.src="archivos/css/imagenes/equis.jpg";Imagen3.src="archivos/css/imagenes/dos.jpg";p1.value="1";>
<img src="archivos/css/imagenes/equis.jpg" name="Imagen2" onclick=Imagen2.src="archivos/css/imagenes/tachado.jpg";Imagen1.src="archivos/css/imagenes/uno.jpg";Imagen3.src="archivos/css/imagenes/dos.jpg";p1.value="X";>
<img src="archivos/css/imagenes/dos.jpg" name="Imagen3" onclick=Imagen3.src="archivos/css/imagenes/tachado.jpg";Imagen2.src="archivos/css/imagenes/equis.jpg";Imagen1.src="archivos/css/imagenes/uno.jpg";p1.value="2";>
</td>

Poniendo esto en cada uno de los partidos de la quiniela marca y desmarca a placer, sin problema, ahora bien ... vamos al tema de enviar lo que se ha marcado:

los 15 partidos de la quiniela estan metidos dentro de un formulario de esta forma:

Código HTML:

<form action="FrontController?res=archivos/quinielaRellena.jsp" method="POST">
<table>
<tr>
<td>Madrid - Barcelona</td>
<td class="estilotd3">
<input type="hidden" name="p1" value="1">
<img src="archivos/css/imagenes/uno.jpg" name="Imagen1" onclick=Imagen1.src="archivos/css/imagenes/tachado.jpg";Imagen2.src="archivos/css/imagenes/equis.jpg";Imagen3.src="archivos/css/imagenes/dos.jpg";p1.value="1";>
<img src="archivos/css/imagenes/equis.jpg" name="Imagen2" onclick=Imagen2.src="archivos/css/imagenes/tachado.jpg";Imagen1.src="archivos/css/imagenes/uno.jpg";Imagen3.src="archivos/css/imagenes/dos.jpg";p1.value="X";>
<img src="archivos/css/imagenes/dos.jpg" name="Imagen3" onclick=Imagen3.src="archivos/css/imagenes/tachado.jpg";Imagen2.src="archivos/css/imagenes/equis.jpg";Imagen1.src="archivos/css/imagenes/uno.jpg";p1.value="2";>
</td>
</tr>
</table>
<input type="submit" value="enviar">

Como puedes ver, según la imagen que piques se cambia el value del input type="hidden" y al pulsar el botón se envian los datos q yo necesito, eso funciona perfectamente PEEEERO ¿Cúal es el problema?:

QUE ÚNICAMENTE ME FUNCIONA EN INTERNET EXPLORER
¡¡¡EN MOZILLA NO FUNCIONA!!!

Cuando lo hago en mozilla, al pulsar el boton lo envia todo como value="1" (que es lo q hay puesto en el <input type="hidden">, es decir, que el onclick no hace su trabajo (pienso yo) ¿¿Alguna solución para este tema??
Es necesario para mi que funcione en Mozilla. Muchas gracias de nuevo.

crujikoki · #24 (**permalink**) 01/05/2008, 10:21

Tio ahí ya no puedo ayudarte. No se cuales son las peculiaridades de cada navegador. Siento no serte de ayuda en este tema.

Pero me alegro que el resto te haya funcionado como esperabas.