poner una imagen al cursor

chivassa · #1 (**permalink**) 02/11/2011, 19:00

bueno necesito ayuda gracias al foro se como poner una imagen personalizada al cursor lo malo es que cuando lo pongo la esquina superior izquierda queda en lo que seria la punta del cursor lo que quiero es que el centro de la imagen quede exactamente en donde esta la punta del cursor se puede hacer eso si es así díganme como hacerlo

furoya · #2 (**permalink**) 03/11/2011, 10:49

Ya repetiste el asunto ór todo el Foro. Ahora habría que juntarlos, al menos los del mismo subforo

http://www.forosdelweb.com/f13/probl...mi-web-955115/

http://www.forosdelweb.com/f53/probl...mi-web-955114/

Supongo que ya estudiaste el problema y viste esta página

https://developer.mozilla.org/es/CSS/cursor

Por ahora son "propietarios", pero quizá algunp más lo haya im´lementado.
De todas formas no creo que te sirva. Lo mejor es "borrar el puntero" (o cambiarlo por un crosshair) y posicionar con JS una imagen. Como ya sabes su tamaño, le restas el top y el left que corresponda.

Zoom en una imagen

Cambiar el cursor del raton

Hay más, pero te dejo buscarlos solo.

EDICIÓN :
Bah...
Al final te hice un ejemplo, muy pavo, pero se ve cómo anda y qué limitaciones tiene

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">
<title></title>
<script type="text/javascript">
function bravo(e){
var puntoX = (document.all) ? e.x : e.pageX; 
var puntoY = (document.all) ? e.y : e.pageY;

document.getElementById("charly").style.visibility = "visible";
document.getElementById("charly").style.left = puntoX-28 +"px";
document.getElementById("charly").style.top = puntoY-28 +"px";

}

</script>

</head>
<body>
<div id="alfa" style="position: absolute; top: 0; left: 0; width:6em; height: 3em; background: yellow; font-size: 3em; cursor: crosshair; overflow: hidden; "  onmousemove="bravo(event)" >
<span onclick="alert('click')">qwertyuiop</span>
<img src="lupah.png" style="position: absolute; top: 0; left: 0; visibility: hidden" id="charly" onmouseout="this.style.visibility = 'hidden'">
</div>
</body>
</html>

chivassa · #3 (**permalink**) 05/11/2011, 19:11

bueno me disculpo apenas stoy checando el tema esq ando ocupado con est trabajo y penas inicio y css apenas empiezo y de js y php u otro lenguajes de stos ignoro por completo voy provar esto y ya digo como sali gracias

emprear · #4 (**permalink**) 06/11/2011, 00:34

Lo primero que necesitas es un software para crear cursores (Microangelo)

Despues, css

Código HTML:

Ver original<!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>
<title>Cursor personalizado</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
 
.cuadrado {
cursor: url('flecha.cur'),default;
width: 300px;
height: 300px;
background-color: #504675;
}
/*]]>*/
</style>
</head>
<body>
<div class="cuadrado">
    Otro cursor
</div>
 
</body>
</html>

Demo:
http://foros.emprear.com/css/cursor/cursor.html

Dos problemas
NO funciona en ópera
Yo dibujando soy un desastre
Saludos

furoya · #5 (**permalink**) 06/11/2011, 11:52

Es que el problema de usar cursores de verdad es que no siempre el navegador o el sistema operativo te dejan cambiar el tamaño, y chivassa quiere una lupa que se vea "grande". Tampoco se puede jugar mucho con la posición; FF lo tiene previsto (como se ve en el enlace que dejé) pero hasta hace unos meses no funcionaba. Es que estarías falseando el punto de click, y no sé si eso no es peor que un puntero de 640px por 480px, que es otra barbaridad. Hay que ver si al final aprueban esa sintaxis.

Dos detalles. En el mensaje anterior el teclado andaba para el tuches (NOTA: es idisch, para probar si el enmascarador de palabras soeces del Foro la reconoce

). Éste que uso ahora está mal configurado, pero anda mejor y creo que se me entiende más.
El otro, es que puse en el ejemplo una ruta a la imagen que no mostramos hasta ahora. Con permiso del autor, la agrego acá para que todos podamos hacer las pruebas.

emprear · #6 (**permalink**) 06/11/2011, 12:06

@furoya...
agrego un tercer problema a los ya expuestos...

Cita:

Ni se me ocurrió leer algo de esto:
http://www.forosdelweb.com/f13/probl...mi-web-955115/

http://www.forosdelweb.com/f53/probl...mi-web-955114/

Supongo que ya estudiaste el problema y viste esta página

https://developer.mozilla.org/es/CSS/cursor

Zoom en una imagen

Cambiar el cursor del raton

Seguramente ahí decia algo de la lupa, porque en este tema, el adminículo brillaba por su ausencia.

Al margen, teclado en idisch, ?, lo que sea, tomalo con calma

להתראות

furoya · #7 (**permalink**) 06/11/2011, 12:33

¡Noo! ¡Noo!

Lo del teclado era porque el mensaje anterior parecía tipeado por una araña borracha!!.

Y lo del idisch ... era por poner un sinónimo de "glúteos" que en Baires se usa bastante (se pronuncia "tujes" — Ups!, a éste sí capaz que me lo censuran

—). Aunque soy goi ('no judío') yo también la uso. Pero tanto como decir "chau" en hebreo, no sé ... ahí me ganaste.

Con respecto al ejemplo, sí, había data desperdigada por todos los temas. Por eso sugerí juntarlos. Vamos a ver —si vale la pena— cuando vuelva nuestro amigo de probar los códigos para qué foro avanzamos.

(Ideograma Universal)

emprear · #8 (**permalink**) 06/11/2011, 13:18

@furoya
Pero papá !!! si yo nací en Floresta !!!, ponga orto nomás que se entiende, y al ser filológicamente Griega, debería pasar cualquier censura, y no dejes de agregar a tus favoritos
http://www.como-se-dice.com/aprender-hebreo/

Esperemos por nuestro amigo entonces

שלום

furoya · #9 (**permalink**) 08/11/2011, 12:57

¡Peero! ¡No había visto de dónde eras!
Entonces, aunque te mudaste a Castelar, nos une la Avenida Rivadavia , porque yo ando por Congreso . (Si bien crecí en los arrabales de la ciudad, en Barracas , a orillas del Riachuelo .)
Aclaremos, de paso, que Congreso y Barracas son dos barrios de Buenos Aires ; al igual que Floresta . Que no debe confundirse con otro llamado Flores , con el que hay una enorme diferencia. (Aunque a veces no resulta tan grande. En fin, cada uno hace lo que puede, con lo que tiene.)

Ya que estamos, una apostilla más para quienes no comparten nuestra vasta (¿ o basta?) poliglotía : la palabra "orto" (ορθος , recto) es un helenismo para referirse de manera más elegante a la parte final del intestino; y por extensión, a su desembocadura.

Cabe aclarar que circuló otra etimología con referencia a unos versos que hablaban de un Hortelano, y hacían una rima con "el Horto y el ano"; pero mi memoria no es lo que era, y ya no puedo recordarla.
Igual no la iba a escribir. No quiero que me hechen por andar publicando coplas soeces.

Y muy buena esa página que recomendás. Ya está en mis Favoritos, en la carpeta Diccionarios (sub-carpeta Traductores). Gracias.

Volviendo a lo nuestro, el ejemplo que pusiste me sirvió para confirmar que el método anda al menos en los principales navegadores (uf, 'Opera'). Tenía mis dudas, y en la época que hice el invento ése del puntero animado no conseguí un sitio gratis donde subir los *.cur para probar.
(Sigo sin conseguirlo, aunque ya me ofrecieron un lugarcito en un servidor, pero no quiero molestar por una pavada que perfectamente puede hacer quien necesite ese efecto para su página). Quizá suba un comprimido con todo empaquetado, para que al menos lo puedan ver funcionando.

...

¡Ah, sí! chivassa : cuando hablamos de "esperarte", es porque comentaste que tu ejemplo de zoom ya tiene una imagen que se mueve con el puntero, pero que no te coincide con la posición que buscas. En realidad te vas a tener que poner a mirar dentro del escript para ubicar esas líneas que posicionan la imagen, y restarles esa diferencia de pixeles.
Como referencia, en el código que puse yo le tuve que sacar 28px a cada lado, para que quedase un poco más arriba, y un poco más a la izquierda. Se calcula cientificamente (a "ojímetro" y a "prueba y error").
Si no lo encuentras, necesariamente habrá que darle trabajo a los moderadores y mover todo a Javascript. Aunque no debe ser muy difícil. No hay tantas formas de hacer el efecto y, con más o menos variables var y seguramente con distintos nombres, lo vas a ver muy parecido al ejemplo pavo que dejé arriba.

Aprovecho para repetir que esos códigos cut&paste que hay en las javascripterías —con suerte, y en el mejor de los casos— son para expertos que se quieren ahorrar el trabajo de escribirlos, porque para adoptarlos hay que entenderlos, y más si necesitan modificaciones o ajustes. De otra forma, se usan así, como están.
En verdad está un poco fuera de lugar que vengan a pedir "correcciones" a un Foro, y obligarnos a revisar un escript que muchas veces es un desastre y nos saca una úlcera. En la mayoría de los casos, yo prefiero escribir el mío, y postearlo. Es más fácil.

Lo valorable de tu caso es que estás tratando por las tuyas de hacer el trabajo. Si en vez de decir

Cita:

Iniciado por chivassa

bueno me disculpo apenas stoy checando el tema esq ando ocupado con est trabajo y penas inicio y css apenas empiezo y de js y php u otro lenguajes de stos ignoro por completo voy provar esto y ya digo como sali gracias

hubieses puesto "acá les dejo el código para que me lo arreglen" la historia hubiese sido distinta. Al menos estás empezando a aprender, para corregir el problema.

(A propósito ... ¿estás usando el mismo teclado que usaba yo?).

emprear · #10 (**permalink**) 08/11/2011, 15:43

@furoya
Una vez más, fuente de inspiración...
Por el momento dejemos las cuestiones etimológicas, porque no se bien en que pueda derivar esto...
Antes de continuar... me declaro culpable, y si, soy un javascriptero, si se me permite el neologismo, o un "cutPastero", algo más refinado y conocedor del tema tal vez. Como sea, y sin haber visto exactamente que s lo que desea el desaparecido @chivassa, dejo el resultado de mis averiguaciones

http://foros.emprear.com/javascript/efecto_lupa/
que no deja de ser una adpatación de
http://www.netzgesta.de/loupe/

Cita:

(A propósito ... ¿estás usando el mismo teclado que usaba yo?).

por?, por los saludos en idisch?... no copy paste nomás

Saludos

PD: hubiera hecho un Castelar/Congreso, pero no me cuadraban bien en mis 1440x900

furoya · #11 (**permalink**) 09/11/2011, 06:07

Excelente.

Lo que me preocupa es que no se pueda poner en texto. No vi ninguno (que no sea para IE) que aumente otra cosa que no sea una imagen. Creo que aún usando canvas, en FF se puede hacer algo, pero habría que inventar un ejemplo compatible.

Es cierto que eres un "cutPastero", pero no me había dado cuenta justamente porque puedes adaptar los documentos. Yo me quejé de los que no hacen eso y después pretenden que lo hagamos nosotros en un Foro.

Igual, el comentario se lo hacía a chivassa; y también lo del teclado, porque medio que no se le entiende el post.

Aprovecho que la seguimos y junto un poco más tus dos ejemplos; el cursor que usaste es un crosshair, pero existe un valor de CSS para 'borrarlo' (none) y que quede mejor, aunque no sé qué tan compatible sea. Por las dudas, el método para que no se vea es reemplazarlo por uno propio ... que sea un "transparente.cur", es decir, un cuadrito transparente, sin dibujo.

Si alguna vez encuentro o se me ocurre algo para texto, y que funcione igual, lo publico.

Un abrazo
furoya

emprear · #12 (**permalink**) 09/11/2011, 09:21

@furoya
Y si, cutPastero, aunque alguna que otra cosita me hago...

Permitime una licencia para lo del texto, que tal un poquito de php

http://foros.emprear.com/javascript/...a/castelar.php

saludos

chivassa · #13 (**permalink**) 10/11/2011, 00:12

bueno gracias apenas pude entrar al foro y voy a buscarle en la parte de java script para agregar esa imagen q no sera mayor a 25px para respetar la lupa pero bueno eso lo empiezo el fin por asusntos d ela escuela y gracias y si logor mover esa parte subire los codigos para ver si alguien mas le ayudan y gracias de nuevo ya que de este foro e sacado muchas cosas y dudas ya que en esto de html js css stoy mur verde je je y algunos m cuenta de otros lenguajes a todo eso no saben don pudeo encontrar manuales libros todo en digital de ajaz jquery php js css html y demas espero no estar molestando tanto

grax

furoya · #14 (**permalink**) 23/11/2011, 13:46

Los manuales los puedes encontrar en éste sitio. Hay recomendaciones en cada foro.
Y no, no molestas. Nos das la excusa para seguir inventando algo nuevo.

Al fin pude ver el ejemplo del texto en varios navegadores. Pero fue una espera absurda, porque supuse que en alguno usabas imagen y en otros no; si hubiese visto el código ya hubiera entendido que le mandabas el texto al PHP y éste lo convertía siempre a imagen. Está muy bien para salir del paso, pero una imagen no ajusta la línea ni se puede editar, seleccionar y copiar como texto. A eso me refería con hacerlo para un párrafo. En IE lo tenía, desde hace mucho. Y con lupa "cuadrada" se puede en todos. Lo que me complica es el borde redondo. No estoy seguro de que mask funcione en este caso. Lo había hecho con la versión MS del chromaK que me permite "doble nivel de transparencia".

En fin, habrá que seguir dándole vueltas.

emprear · #15 (**permalink**) 23/12/2011, 18:45

@furoya, ayer me topé con esto

http://css-tricks.com/examples/AnythingZoomer/text.php

Quizás sea la respuesta, el análisis de la criatura te lo dejo a vos, muy recomendable por cierto, si se hace como actividad digestiva post "lechón navideño".

Felices Fiestas !!!!

furoya · #16 (**permalink**) 25/12/2011, 06:58

Recuerdo que tenía un problema con esto del texto si no usaba el zoom CSS de IE, y es que las líneas se cortaban en cualquier lado. Este ejemplo no lo resolvió, y tiene un par de bugs si usas —además— el resize del navegador.

Pero la idea de usar una imagen no está del todo mal. El problema es que hay que hacerlo en el lado cliente justamente porque es allí donde se ajustan las líneas de texto.
Quizá el cambio sería que la versión reducida es la imagen, y el zoom es el texto de verdad, del que se capturó aquella imagen. Como el puntero se queda sobre la parte ampliada, al editar (seleccionar, copiar) lo hacemos sobre el texto.

Con canvas creo que se puede hacer esa captura, en IE —de última— podemos seguir usando el CSS zoom.

Gracias, es bueno saber que los temas siguen creciendo y no se abandonan.

Y también te deseo ¡Muchas Felicidades!.