Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] Evento onmuouse y cursor

Estas en el tema de Evento onmuouse y cursor en el foro de Javascript en Foros del Web. Hola me gustaria saber como podria cambiar el cursor cuando el puntero pase al borde de un div Saludos...
  #1 (permalink)  
Antiguo 14/07/2012, 09:12
Avatar de jonni09lo
Colaborador
 
Fecha de Ingreso: septiembre-2011
Ubicación: Estigia
Mensajes: 1.471
Antigüedad: 12 años, 10 meses
Puntos: 397
Evento onmuouse y cursor

Hola me gustaria saber como podria cambiar el cursor cuando el puntero pase al borde de un div

Saludos
__________________
Haz preguntas inteligentes-Como ser Hacker
No hacer preguntas por mensaje privado. No sólo no es inteligente sino que es egoísta.
  #2 (permalink)  
Antiguo 14/07/2012, 09:31
Avatar de dontexplain  
Fecha de Ingreso: junio-2012
Mensajes: 536
Antigüedad: 12 años, 1 mes
Puntos: 127
Respuesta: Evento onmuouse y cursor

Para el borde sólo no, pero sí para el elemento.

usa el pseudoselector :hover al elemento y modifica la propiedad css

cursor:id

donde id será cualquiera de los valores mostrados aquí.

Un saludo.
__________________
21añero.
HTML/CSS, PHP, JS/jQuery, Mysql; NodeJS/Socket.io (& V8); C++ ; Python (wxpy); Ensamblador.
Músico (clarinetista/pianista) y compositor
  #3 (permalink)  
Antiguo 14/07/2012, 09:35
Avatar de jonni09lo
Colaborador
 
Fecha de Ingreso: septiembre-2011
Ubicación: Estigia
Mensajes: 1.471
Antigüedad: 12 años, 10 meses
Puntos: 397
Respuesta: Evento onmuouse y cursor

gracias por responder eso si lo se hacer, lo que quiero es poder q cuando se pase el puntero solo cambie en los bordes del div nada mas

Saludos
__________________
Haz preguntas inteligentes-Como ser Hacker
No hacer preguntas por mensaje privado. No sólo no es inteligente sino que es egoísta.
  #4 (permalink)  
Antiguo 14/07/2012, 09:47
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 8 meses
Puntos: 317
Respuesta: Evento onmuouse y cursor

Sería un invento, no sería realmente en el borde, pero para el que mueve el puntero parecería que sí.

¿Por qué no pones un ejemplo de dónde quieres que se vea? Porque el engendro quizá haya que hacerlo a medida.
  #5 (permalink)  
Antiguo 14/07/2012, 09:54
Avatar de dontexplain  
Fecha de Ingreso: junio-2012
Mensajes: 536
Antigüedad: 12 años, 1 mes
Puntos: 127
Respuesta: Evento onmuouse y cursor

Para eso has de usar event.offsetX y event.offsetY para la posición del cursor del ratón dentro del elemento y event.target.offsetTop y event.target.offsetWidth para el tamaño (alto-ancho) del elemento.

UN saludo.
__________________
21añero.
HTML/CSS, PHP, JS/jQuery, Mysql; NodeJS/Socket.io (& V8); C++ ; Python (wxpy); Ensamblador.
Músico (clarinetista/pianista) y compositor
  #6 (permalink)  
Antiguo 14/07/2012, 10:26
Avatar de jonni09lo
Colaborador
 
Fecha de Ingreso: septiembre-2011
Ubicación: Estigia
Mensajes: 1.471
Antigüedad: 12 años, 10 meses
Puntos: 397
Respuesta: Evento onmuouse y cursor

Trate con este codigo
Código Javascript:
Ver original
  1. function raton(e) {
  2.         x = e.clientX;
  3.         y = e.clientY;
  4.         if(event.offsetY <=5){
  5.             document.getElementById('hol').style.cursor='hand';
  6.         }
  7.         document.getElementById('co').innerHTML = x+'-'+y;
  8.     }
Código HTML:
Ver original
  1. <div id="hol" onmouseover="raton(event)">
  2.     <p id="co" >
  3.        
  4.     </p>
  5. </div>
Pero no me funciona que estoy haciendo mal?
__________________
Haz preguntas inteligentes-Como ser Hacker
No hacer preguntas por mensaje privado. No sólo no es inteligente sino que es egoísta.
  #7 (permalink)  
Antiguo 14/07/2012, 12:38
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 8 meses
Puntos: 317
Respuesta: Evento onmuouse y cursor

Por eso es que queríamos ver el código.

Resulta que no hay CSS. Eso que llamas "borde" no es un border, sino el límite de una caja. En este caso, supongo que para tu div id="hol".

En pricipio, el hover te serviría perfectamente. Quizá con algún ajuste, pero anda.

El problema de ese código está en que ni miraste el link que te dejó dontexplain. De otra forma, sabrías que cursor (ya) no tiene ningún valor hand.
Seguramente estás queriendo usar pointer.

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<script type="text/javascript">
function raton(e) {
        x = e.clientX; 
        y = e.clientY; 
        if(event.offsetY <=5){
            document.getElementById('hol').style.cursor='pointer';
        }
        document.getElementById('co').innerHTML = x+'-'+y; 
}
</script>
<style type="text/css">

</style>
</head>
<body>
<div id="hol" onmouseover="raton(event)">
    <p id="co" >
       QWERTYUIOP
    </p>
</div>
</body>
</html>
Cambiando el evento por onmousemove se pueden ver mejor los límites donde empieza a trabajar el escript.

Hay más formas de hacerlo, combinando eventos en las capas, pero si ésa te sirve, está bien.
  #8 (permalink)  
Antiguo 15/07/2012, 10:46
Avatar de jonni09lo
Colaborador
 
Fecha de Ingreso: septiembre-2011
Ubicación: Estigia
Mensajes: 1.471
Antigüedad: 12 años, 10 meses
Puntos: 397
Respuesta: Evento onmuouse y cursor

Gracias por sus respuestas me sirvio :)
__________________
Haz preguntas inteligentes-Como ser Hacker
No hacer preguntas por mensaje privado. No sólo no es inteligente sino que es egoísta.
  #9 (permalink)  
Antiguo 15/07/2012, 12:22
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 8 meses
Puntos: 317
Respuesta: Evento onmuouse y cursor

De nada.

Un último comentario, antes de que alguno venga a recordarlo ...

El caso que estás planteando es muy especial, porque quieres cambiar un puntero.

Y el puntero no se ve ... hasta que lo ponemos encima de algo. Quiero decir, que tu div no está mostrando el tipo de cursor que usa todo el tiempo (como puede ocurrir con un color de texto) y al pasarle el puntero cambia por otro.

En este caso particular, con agregarle

Código:
<div style="cursor: pointer"> qwertyuiop</div>
era suficiente. Sin el hover.

Saludos
furoya

P.D.: Gracias por el +1!

Etiquetas: cursor, evento
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 12:26.