He mirado el código en Internet y, al final, he encontrado esta solución.
Primero veamos el ejemplo.
Al pasar el cursor por encima de la tabla, las celdas a3, b1, c2 y d4 cambian de color.
Código de la página web:
| <!DOCTYPE html> <html> <head> <title>Cuadrado mágico de 4 x 4</title> <meta charset="UTF-8" /> <meta name="author" content="Ángel Puente" /> <link href="magico4x4.css" rel="stylesheet" type="text/css" /> <script src="magico4x4H.js"></script> </head> <body> <form id="myForm"> <table> <tr> <td><input id="a1" value="1"></td> <td><input id="a2" value="14"></td> <td><input id="a3" value="15" onmouseover="cambiacolor_over(this)" onmouseout="cambiacolor_out(this)"></td> <td><input id="a4" value="4"></td> </tr> <tr> <td><input id="b1" value="12" onmouseover="cambiacolor_over(this)" onmouseout="cambiacolor_out(this)"></td> <td><input id="b2" value="7"></td> <td><input id="b3" value="6"></td> <td><input id="b4" value="9"></td> </tr> <tr> <td><input id="c1" value="8"></td> <td><input id="c2" value="11" onmouseover="cambiacolor_over(this)" onmouseout="cambiacolor_out(this)"></td> <td><input id="c3" value="10"></td> <td><input id="c4" value="5"></td> </tr> <tr> <td><input id="d1" value="13"></td> <td><input id="d2" value="2"></td> <td><input id="d3" value="3"></td> <td><input id="d4" value="16" onmouseover="cambiacolor_over(this)" onmouseout="cambiacolor_out(this)"></td> </tr> <tr> <td colspan="2"><button type="button" class="myButton" onclick="comprobar()">Enviar</button></td> <td colspan="2"><button type="button" class="myButton" onclick="formReset()">Borrar</button></td> </tr> <tr> <td colspan="4" align="center"><p id="demo"></p></td> </tr> </table> </form> |
Observamos que en los inputs colocados en las celdas deseadas llamamos a las funciones cambiacolor_over() cuando el cursor estén en onmouseover y a la función cambiacolor_out() cuando el cursor esté en posición onmouseout.
Código del archivo .js
| function formReset() { document.getElementById("myForm").reset(); document.getElementById("demo").innerHTML = " "; } function comprobar() { var va1, va2, va3, va4, vb1, vb2, vb3, vb4, vc1, vc2, vc3, vc4, vd1, vd2, vd3, vd4, text; va1 = document.getElementById("a1").value; va2 = document.getElementById("a2").value; va3 = document.getElementById("a3").value; va4 = document.getElementById("a4").value; vb1 = document.getElementById("b1").value; vb2 = document.getElementById("b2").value; vb3 = document.getElementById("b3").value; vb4 = document.getElementById("b4").value; vc1 = document.getElementById("c1").value; vc2 = document.getElementById("c2").value; vc3 = document.getElementById("c3").value; vc4 = document.getElementById("c4").value; vd1 = document.getElementById("d1").value; vd2 = document.getElementById("d2").value; vd3 = document.getElementById("d3").value; vd4 = document.getElementById("d4").value; if (va1 !=1 || va2 !=14 || va3 !=14 || va4 !=4 || vb1 !=11 || vb2 !=7 || vb3 !=6 || vb4 !=9 || vc1 !=8 || vc2 !=10 || vc3 !=10 || vc4 !=5 || vd1 !=13 || vd2 !=2 || vd3 !=3 || vd4 !=15) { text = "No es lo que buscamos."; } else { text = "¡SOLUCIÓN DE SUBIRACHS!"; } document.getElementById("demo").innerHTML = text; } function ayuda1(){ va3 = document.getElementById("a3").value = 2; vb3 = document.getElementById("b3").value = 11; vc3 = document.getElementById("c3").value = 7; } function ayuda2(){ vb4 = document.getElementById("b4").value = 8; vc1 = document.getElementById("c1").value = 9; vd1 = document.getElementById("d1").value = 4; } function cambiacolor_over(celda){ celda.style.backgroundColor="#ff0000" } function cambiacolor_out(celda){ celda.style.backgroundColor="#ffffff" } |
En el archivo js declaramos las dos funciones con los dos colores, el rojo y el blanco.
Lamentablemente, este código no funciona bien en el iPad.
En el resto de navegadores en los que he probado, sí.
No hay comentarios:
Publicar un comentario