<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--<link rel="stylesheet" href="./css/styles.css">-->
    <script src="./css/styles.js"></script>
    <script src="./js/functions.js"></script>
</head>

<body>

    <table id="tablero">
        <tr> <!--row-->

            <td onclick="mostrarReina(this)" onmouseover="cambiarColor(0,0)" onmouseleave="limpiar()"></td>
            <td onclick="mostrarReina(this)" onmouseover="cambiarColor(0,1)" onmouseleave="limpiar()"></td>
            <td onclick="mostrarReina(this)" onmouseover="cambiarColor(0,2)" onmouseleave="limpiar()"></td>
            <td onclick="mostrarReina(this)" onmouseover="cambiarColor(0,3)" onmouseleave="limpiar()"></td>
            <td onclick="mostrarReina(this)" onmouseover="cambiarColor(0,4)" onmouseleave="limpiar()"></td>
            <td onclick="mostrarReina(this)" onmouseover="cambiarColor(0,5)" onmouseleave="limpiar()"></td>
            <td onclick="mostrarReina(this)" onmouseover="cambiarColor(0,6)" onmouseleave="limpiar()"></td>
            <td onclick="mostrarReina(this)" onmouseover="cambiarColor(0,7)" onmouseleave="limpiar()"></td>
        </tr>
        <tr>
            <td onclick="mostrarReina(this)" onmouseover="cambiarColor(1,0)" onmouseleave="limpiar()"></td>
            <td onclick="mostrarReina(this)" onmouseover="cambiarColor(1,1)" onmouseleave="limpiar()"></td>
            <td onclick="mostrarReina(this)" onmouseover="cambiarColor(1,2)" onmouseleave="limpiar()"></td>
            <td onclick="mostrarReina(this)" onmouseover="cambiarColor(1,3)" onmouseleave="limpiar()"></td>
            <td onclick="mostrarReina(this)" onmouseover="cambiarColor(1,4)" onmouseleave="limpiar()"></td>
            <td onclick="mostrarReina(this)" onmouseover="cambiarColor(1,5)" onmouseleave="limpiar()"></td>
            <td onclick="mostrarReina(this)" onmouseover="cambiarColor(1,6)" onmouseleave="limpiar()"></td>
            <td onclick="mostrarReina(this)" onmouseover="cambiarColor(1,7)" onmouseleave="limpiar()"></td>
        </tr>
        <tr>
            <td onclick="mostrarReina(this)" onmouseover="cambiarColor(2,0)" onmouseleave="limpiar()"></td>
            <td onclick="mostrarReina(this)" onmouseover="cambiarColor(2,1)" onmouseleave="limpiar()"></td>
            <td onclick="mostrarReina(this)" onmouseover="cambiarColor(2,2)" onmouseleave="limpiar()"></td>
            <td onclick="mostrarReina(this)" onmouseover="cambiarColor(2,3)" onmouseleave="limpiar()"></td>
            <td onclick="mostrarReina(this)" onmouseover="cambiarColor(2,4)" onmouseleave="limpiar()"></td>
            <td onclick="mostrarReina(this)" onmouseover="cambiarColor(2,5)" onmouseleave="limpiar()"></td>
            <td onclick="mostrarReina(this)" onmouseover="cambiarColor(2,6)" onmouseleave="limpiar()"></td>
            <td onclick="mostrarReina(this)" onmouseover="cambiarColor(2,7)" onmouseleave="limpiar()"></td>
        </tr>
        <tr>
            <td onclick="mostrarReina(this)" onmouseover="cambiarColor(3,0)" onmouseleave="limpiar()"></td>
            <td onclick="mostrarReina(this)" onmouseover="cambiarColor(3,1)" onmouseleave="limpiar()"></td>
            <td onclick="mostrarReina(this)" onmouseover="cambiarColor(3,2)" onmouseleave="limpiar()"></td>
            <td onclick="mostrarReina(this)" onmouseover="cambiarColor(3,3)" onmouseleave="limpiar()"></td>
            <td onclick="mostrarReina(this)" onmouseover="cambiarColor(3,4)" onmouseleave="limpiar()"></td>
            <td onclick="mostrarReina(this)" onmouseover="cambiarColor(3,5)" onmouseleave="limpiar()"></td>
            <td onclick="mostrarReina(this)" onmouseover="cambiarColor(3,6)" onmouseleave="limpiar()"></td>
            <td onclick="mostrarReina(this)" onmouseover="cambiarColor(3,7)" onmouseleave="limpiar()"></td>
        </tr>
        <tr>
            <td onclick="mostrarReina(this)" onmouseover="cambiarColor(4,0)" onmouseleave="limpiar()"></td>
            <td onclick="mostrarReina(this)" onmouseover="cambiarColor(4,1)" onmouseleave="limpiar()"></td>
            <td onclick="mostrarReina(this)" onmouseover="cambiarColor(4,2)" onmouseleave="limpiar()"></td>
            <td onclick="mostrarReina(this)" onmouseover="cambiarColor(4,3)" onmouseleave="limpiar()"></td>
            <td onclick="mostrarReina(this)" onmouseover="cambiarColor(4,4)" onmouseleave="limpiar()"></td>
            <td onclick="mostrarReina(this)" onmouseover="cambiarColor(4,5)" onmouseleave="limpiar()"></td>
            <td onclick="mostrarReina(this)" onmouseover="cambiarColor(4,6)" onmouseleave="limpiar()"></td>
            <td onclick="mostrarReina(this)" onmouseover="cambiarColor(4,7)" onmouseleave="limpiar()"></td>
        </tr>
        <tr>
            <td onclick="mostrarReina(this)" onmouseover="cambiarColor(5,0)" onmouseleave="limpiar()"></td>
            <td onclick="mostrarReina(this)" onmouseover="cambiarColor(5,1)" onmouseleave="limpiar()"></td>
            <td onclick="mostrarReina(this)" onmouseover="cambiarColor(5,2)" onmouseleave="limpiar()"></td>
            <td onclick="mostrarReina(this)" onmouseover="cambiarColor(5,3)" onmouseleave="limpiar()"></td>
            <td onclick="mostrarReina(this)" onmouseover="cambiarColor(5,4)" onmouseleave="limpiar()"></td>
            <td onclick="mostrarReina(this)" onmouseover="cambiarColor(5,5)" onmouseleave="limpiar()"></td>
            <td onclick="mostrarReina(this)" onmouseover="cambiarColor(5,6)" onmouseleave="limpiar()"></td>
            <td onclick="mostrarReina(this)" onmouseover="cambiarColor(5,7)" onmouseleave="limpiar()"></td>
        </tr>
        <tr>
            <td onclick="mostrarReina(this)" onmouseover="cambiarColor(6,0)" onmouseleave="limpiar()"></td>
            <td onclick="mostrarReina(this)" onmouseover="cambiarColor(6,1)" onmouseleave="limpiar()"></td>
            <td onclick="mostrarReina(this)" onmouseover="cambiarColor(6,2)" onmouseleave="limpiar()"></td>
            <td onclick="mostrarReina(this)" onmouseover="cambiarColor(6,3)" onmouseleave="limpiar()"></td>
            <td onclick="mostrarReina(this)" onmouseover="cambiarColor(6,4)" onmouseleave="limpiar()"></td>
            <td onclick="mostrarReina(this)" onmouseover="cambiarColor(6,5)" onmouseleave="limpiar()"></td>
            <td onclick="mostrarReina(this)" onmouseover="cambiarColor(6,6)" onmouseleave="limpiar()"></td>
            <td onclick="mostrarReina(this)" onmouseover="cambiarColor(6,7)" onmouseleave="limpiar()"></td>
        </tr>
        <tr>
            <td onclick="mostrarReina(this)" onmouseover="cambiarColor(7,0)" onmouseleave="limpiar()"></td>
            <td onclick="mostrarReina(this)" onmouseover="cambiarColor(7,1)" onmouseleave="limpiar()"></td>
            <td onclick="mostrarReina(this)" onmouseover="cambiarColor(7,2)" onmouseleave="limpiar()"></td>
            <td onclick="mostrarReina(this)" onmouseover="cambiarColor(7,3)" onmouseleave="limpiar()"></td>
            <td onclick="mostrarReina(this)" onmouseover="cambiarColor(7,4)" onmouseleave="limpiar()"></td>
            <td onclick="mostrarReina(this)" onmouseover="cambiarColor(7,5)" onmouseleave="limpiar()"></td>
            <td onclick="mostrarReina(this)" onmouseover="cambiarColor(7,6)" onmouseleave="limpiar()"></td>
            <td onclick="mostrarReina(this)" onmouseover="cambiarColor(7,7)" onmouseleave="limpiar()"></td>
        </tr>
    </table>

    <select name="" id="">
        <option value="">Reina de Yugi</option>
        <option value="">Reina de Brownies</option>
        <option value="">Dulce Princesa</option>
    </select>

    <select name="" id="" onchange="solucion1()">
        <option value="">--</option>
        <option value="">Solución 1</option>
        <option value="">Solución 2</option>
        <option value="">Solución 3</option>
    </select>
</body>

</html>