Como estan haciendo esta tabla?

[triqui]

Hola, quiero replicar esto que tienen en esta web. Es una quiniela.

http://www.sorteos.es/quiniela-de-futbol/

No entiendo como hacen el efecto de darle a cada columna un hover, que pasas por las columnas y se cambian de color...pero no es un hover, porque hago click derecho para ver la imagen...y no es una imagen...es un estilo, eso esta hecho con javascript + css?


Segun los inputs utiliza un tipo text... porque no utiliza <img> si yo veo imagenes o son css...

Tambien veo en su codigo mas abajo como que utiliza <map>...puede ser que utilize eso para hacer lo de las secciones.... podeis arrojarme un poco de luz para entenderlo..esta utilizando jquery + javascript...



este es el codigo de los inputs que tiene para crear esa quiniela.

Código HTML:

<table>
<tr>
 
<td>
    <table>
    
    <tr>
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row0a">
    </td>
    <td>
 
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row0b">
    </td>
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row0c">
    </td>
    </tr>
    
    <tr>
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row1a">
 
    </td>
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row1b">
    </td>
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row1c">
    </td>
    </tr>
    
    <tr>
 
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row2a">
    </td>
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row2b">
    </td>
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row2c">
    </td>
 
    </tr>
    
    <tr>
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row3a">
    </td>
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row3b">
    </td>
    <td>
 
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row3c">
    </td>
    </tr>
    
    <tr>
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row4a">
    </td>
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row4b">
 
    </td>
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row4c">
    </td>
    </tr>
    
    <tr>
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row5a">
    </td>
 
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row5b">
    </td>
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row5c">
    </td>
    </tr>
    
    <tr>
    <td>
 
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row6a">
    </td>
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row6b">
    </td>
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row6c">
    </td>
    </tr>
 
    
    <tr>
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row7a">
    </td>
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row7b">
    </td>
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row7c">
 
    </td>
    </tr>
    
    <tr>
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row8a">
    </td>
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row8b">
    </td>
 
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row8c">
    </td>
    </tr>
    
    <tr>
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row9a">
    </td>
    <td>
 
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row9b">
    </td>
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row9c">
    </td>
    </tr>
    
    <tr>
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row10a">
 
    </td>
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row10b">
    </td>
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row10c">
    </td>
    </tr>
    
    <tr>
 
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row11a">
    </td>
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row11b">
    </td>
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row11c">
    </td>
 
    </tr>
    
    <tr>
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row12a">
    </td>
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row12b">
    </td>
    <td>
 
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row12c">
    </td>
    </tr>
    
    <tr>
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row13a">
    </td>
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row13b">
 
    </td>
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row13c">
    </td>
    </tr>
    
    </table>
</td>
 
</tr>
</table>
 

[rodomiro]

Una vez hice algo similar y simplemente seria que cada cuadro gris es un LI, el cual tiene fondo gris y un hover blanco. Claramente flotando hacia la derecha.

Saludos

[triqui]

Iniciado por rodomiro

Una vez hice algo similar y simplemente seria que cada cuadro gris es un LI, el cual tiene fondo gris y un hover blanco. Claramente flotando hacia la derecha.

Saludos

Cada cuadro gris?? te refieres a las columnas?,...no veo ningun cuadro gris..

[memoadian]

Creo que se confundio, el hablaba de el menu gris, y yo veo que hablas de las columnas naranjas de la quiniela, bueno yo creo que es javascript, por no decir estoy seguro, busca informacion de GetElementById y eso, para manejar el css desde javascript. :D

[Dansolo]

Desglozando su codigo fuente :

Es una imagen y encima mapearon ( etiqueta <map> ) por coordenadas , y el efecto hover con javascript para cada columna


<map id="blocksMap" name="blocksMap">
<area class="blockSelect" href="javascript:void(0)" shape="rect" coords="211,0,269,229">
<area class="blockSelect" href="javascript:void(0)" shape="rect" coords="269,0,327,229"><area class="blockSelect" href="javascript:void(0)" shape="rect" coords="327,0,385,229">
<area class="blockSelect" href="javascript:void(0)" shape="rect" coords="385,0,443,229">
<area class="blockSelect" href="javascript:void(0)" shape="rect" coords="443,0,501,229">
<area class="blockSelect" href="javascript:void(0)" shape="rect" coords="501,0,559,229">
<area class="blockSelect" href="javascript:void(0)" shape="rect" coords="559,0,617,229">
<area class="blockSelect" href="javascript:void(0)" shape="rect" coords="617,0,675,229"></map>

[triqui]

Es lo que sospechaba,...habia visto elemenos map dentro de su codigo, pero no estaba realmente convencido de ello.

gracias !