Foros del Web » Programando para Internet » Javascript »

Evento onMouseMove y onLoad

Estas en el tema de Evento onMouseMove y onLoad en el foro de Javascript en Foros del Web. Buenas, primero de todo presentarme, soy nuevo por estos lugares, y casi que también por la programación WEB. Vereis, tengo una relación de ejercicios, y ...
  #1 (permalink)  
Antiguo 03/12/2012, 12:53
 
Fecha de Ingreso: diciembre-2012
Mensajes: 7
Antigüedad: 11 años, 11 meses
Puntos: 0
Evento onMouseMove y onLoad

Buenas, primero de todo presentarme, soy nuevo por estos lugares, y casi que también por la programación WEB.

Vereis, tengo una relación de ejercicios, y uno en concreto no se como solucionarlo, como meterle mano.
El enunciado es el siguiente:
"Eventos onMouseMove y onLoad. Debemos ser capaces de dibujar con nuestro ratón en dos colores diferentes. Para ello primero simularemos que disponemos de un canvas gráfico: realmente se tratará de una tabla con celdas de pequeño tamaño
(100x100 puede valer). Tu programa creará ese canvas una vez cargada la página
(onLoad). Lo siguiente será detectar el movimiento del ratón sobre las celdas para
pintarlas de un color, el cual será rojo si se mantiene pulsada simultaneamente la
tecla Ctrl y azul si se pulsa Shift. En otro caso no deberá pintarse nada."

He creado una tabla 100x100 en una función crearTabla(){}, la cual no he metio ni bordes ni nada para que parezca que no hay nada.
A la funcion la llamo desde el body en el HTML con el elemento onLoad, puesto que asi sabremos que esta cargada la pagina tal y como pide el ejercicio.

El problema, viene que no se ahora bien como hacer para que cuando pasemos el raton, vaya detectando las celdas en las que esta el raton, y pintar esas celdas segun las teclas que tengamos pulsadas.

Si alguien me puede ayudar, con cualquier idea, sugerencia, se lo agradezco! Muchas gracias!
  #2 (permalink)  
Antiguo 03/12/2012, 13:41
 
Fecha de Ingreso: diciembre-2012
Mensajes: 7
Antigüedad: 11 años, 11 meses
Puntos: 0
Respuesta: Evento onMouseMove y onLoad

Os dejo el codigo de lo que llevo, la idea es que no se donde llamar al evento onMouseMove(o el over creo que también serviria), tendria que hacerlo en el for dentro de cada celda?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ejercicio 4 JS</title>
<script type="text/javascript">
function pintarTabla(e){
var tabla=document.getElementById("miTabla");
if(e.shiftKey==1){
celda.style.backgroundColor="blue";
}
else{
celda.style.backgroundColor="white";
}

if(e.ctrlKey==1){
celda.style.backgroundColor="red";
}
else{
celda.style.backgroundColor="white";
}
}
function creaTabla(){
document.write('<table width="200" border="0" cellspacing="1" cellpadding="1">');
for(i=0;i<10;i++){
document.write('<tr><td></td><td></td></tr>');
}
document.write('</table>');
}
</script>
</head>

<body onLoad="creaTabla();">
</body>
</html>
  #3 (permalink)  
Antiguo 03/12/2012, 14:09
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 17 años, 4 meses
Puntos: 1567
Respuesta: Evento onMouseMove y onLoad

arranquemos con tu código

que se supone que es "celda"

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #4 (permalink)  
Antiguo 03/12/2012, 14:13
 
Fecha de Ingreso: diciembre-2012
Mensajes: 7
Antigüedad: 11 años, 11 meses
Puntos: 0
Respuesta: Evento onMouseMove y onLoad

Vale, ya lo he editado, estaba modificando cosillas y lo subi antes de tiempo, sorry.

Aqui estoy intentando conseguir algo mas básico, para luego ir profundizando, la idea es que cuando pase el raton por encima de algunas de las celdas, me convierta el color de fondo a rojo.

No se porque falla, igual debo sacar la tabla del for para que detecte cada una de las celdas?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ejercicio 4 JS</title>
<script type="text/javascript">
function cambiacolor(celda){
celda.style.backgroundColor="red"
}
function creaTabla(){
document.write('<table width="200" border="0" cellspacing="1" cellpadding="1">');
for(i=0;i<10;i++){
document.write('<tr><td onmouseover="cambiacolor(this)"></td><td onmouseover="cambiacolor(this)""> </td></tr>');
}
document.write('</table>');
}
</script>
</head>

<body onLoad="creaTabla();">
</body>
</html>
  #5 (permalink)  
Antiguo 03/12/2012, 14:32
Avatar de satjaen  
Fecha de Ingreso: septiembre-2012
Ubicación: Jaén (Andalucía)
Mensajes: 893
Antigüedad: 12 años, 2 meses
Puntos: 10
Respuesta: Evento onMouseMove y onLoad

Cita:
Iniciado por xdvegax Ver Mensaje
Vale, ya lo he editado, estaba modificando cosillas y lo subi antes de tiempo, sorry.

Aqui estoy intentando conseguir algo mas básico, para luego ir profundizando, la idea es que cuando pase el raton por encima de algunas de las celdas, me convierta el color de fondo a rojo.

No se porque falla, igual debo sacar la tabla del for para que detecte cada una de las celdas?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ejercicio 4 JS</title>
<script type="text/javascript">
function cambiacolor(celda){
celda.style.backgroundColor="red"
}
function creaTabla(){
document.write('<table width="200" border="0" cellspacing="1" cellpadding="1">');
for(i=0;i<10;i++){
document.write('<tr><td onmouseover="cambiacolor(this)"></td><td onmouseover="cambiacolor(this)""> </td></tr>');
}
document.write('</table>');
}
</script>
</head>

<body onLoad="creaTabla();">
</body>
</html>
Mira esto a ver si te vale:
http://www.forosdelweb.com/f13/cambi...1/#post4314941
Un saludo

Etiquetas: evento, funcion, html, onload
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 16:10.