Foros del Web » Creando para Internet » Diseño web »

¿Se puede hacer esto?

Estas en el tema de ¿Se puede hacer esto? en el foro de Diseño web en Foros del Web. 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: ...
  #1 (permalink)  
Antiguo 19/12/2010, 07:13
Avatar de RedDeivit  
Fecha de Ingreso: diciembre-2010
Mensajes: 2
Antigüedad: 7 años
Puntos: 0
Pregunta ¿Se puede hacer esto?

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.
  #2 (permalink)  
Antiguo 19/12/2010, 09:09
 
Fecha de Ingreso: septiembre-2010
Mensajes: 13
Antigüedad: 7 años, 2 meses
Puntos: 0
Respuesta: ¿Se puede hacer esto?

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.

Última edición por Fonsiman; 19/12/2010 a las 09:30 Razón: Retocar
  #3 (permalink)  
Antiguo 19/12/2010, 09:40
Avatar de RedDeivit  
Fecha de Ingreso: diciembre-2010
Mensajes: 2
Antigüedad: 7 años
Puntos: 0
Respuesta: ¿Se puede hacer esto?

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

Un saludo!!
  #4 (permalink)  
Antiguo 19/12/2010, 09:53
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.544
Antigüedad: 15 años, 8 meses
Puntos: 1262
Respuesta: ¿Se puede hacer esto?

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
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 07:43.