¿Se puede hacer esto?

[RedDeivit]

Hola,

Llevo semanas con un problema que no consigo resolver. No voy a decir exactamente cuanto tiempo porque me da hasta vergüenza Es el siguiente:

Quiero hacer una cuadricula de 100x100 (casillas) y que al situar el cursor sobre una de ellas, se vuelva de otro color, y unos segundos despues, salga una leyenda tipo las de ayuda , que indique un numero.

He pensado en pillar una imagen (negra), dividirla, y obtener la cuadricula 100x100. Despues, el cambio del color, podria hacerse con onmouseover y onmouseout (imagen roja por ejemplo), o algo similar. El problema surge en:

1 - ¿Como colocar la leyenda tras el cambio de imagenes?
2- ¿Como podria automatizar el proceso para no tener que editar 1 a 1 las 10.000 casillas?

Chicos, estoy muy perdido y os agradezco mucho vuestra ayuda

Un saludo

PD: No sabia si ubicar este hilo en programacion, webs en general u otros temas. Si no es el sitio correcto, pido perdon.

[Fonsiman]

Hola muy buenas. No soy muy experto en el tema pero por lo que sé todo esto se puede hacer con los eventos de Javascript y se simplificaría mucho con el jQuery.

En primer lugar puedes trabajar con el objeto evento que tiene dos propiedades pageX y pageY, las cuales te dan la posición x e y del ratón.

Luego están los eventos mouseenter y mouseleave que trabajan igual que el onmouseover/out.

De esta forma puedes programar con el mouseenter/leave te cambie el color de fondo:

Código HTML:

$("#casilla").mouseenter(function(evento){
$("casilla").css({ background: "#FF0000" });
});

Siendo casilla tu div 100x100.

Luego con un setTimeout activar otra función que haga que salga la leyenda donde está el ratón.

Código HTML:

var temporizador;

$("#casilla").mouseenter(function(evento){
                    $("casilla").css({  background: "#FF0000" });
                    clearTimeout(temporizador);
                    temporizador = setTimeout("mostrar()",3000);
                });

Donde hemos definido una variable temporizador. El 3000 del setTimeout es en milisegundos, es decir, que ocurrirá a los 3 segundos.

La función mostrar es la que hará que se muestre la leyenda:

Código HTML:

function mostrar(){
$("#leyenda").css("left", evento.pageX + 5);
$("#leyenda").css("top", evento.pageY + 5);
$("#leyenda").css("display", "block");
};

El evento.pageX/pageY hace que la leyenda aparezca donde está el ratón, ya que hemos cambiado su css.
Por último, que cuando salga del div que vuelva todo como antes:

Código HTML:

$("#casilla").mouseleave(function(evento){
                    $("casilla").css({ background: "#FFFFFF" });
                    $("#leyenda").css("display", "none");
                });

Para automatizarlo únicamente tienes que utilizar los selectores del jQuery y hacer que las capas casilla[i] se les corresponda la capa leyenda[i].

Vuelvo a decir que soy principiante en esto y no estoy totalmente seguro de que el código sea 100% este, pero de lo que sí lo estoy es que la mecánica si es esta.

Un saludo y espero haberte ayudado.

[RedDeivit]

Muchas gracias Fonsiman por tu tiempo y tu magnifica respuesta, voy a ponerme con ello ahora mismo :)

Un saludo!!

[caricatos]

Hola:

¡Qué manía con las librerías!...

...y para más inri, aconsejadas por un "inexperto"...

Puedes usar algún lenguaje del servidor o javascript (sin esa absurda tendencia de usar librerías)... parece que solo necesitas un bucle for tal vez anidado...

Decide si quieres resolverlo en el servidor o en el navegador para mover el tema (indicando en su caso el lenguaje que use tu servidor)
Es mucho más eficiente el lenguaje del servidor (php por ejemplo)

Saludos