cambiar puntero

[ratamaster]

exite alguna función o algo para cambiar el puntero del mouse, con por ejemlo una imagen o simplemente cambiarle el color o tamaño?

Gracias
ratamaster

[KarlanKas]

Eso entraría dentro de las CSS:

<img style="cursor:url(micursor.ico)" src="miimagen.jpg" />

Siendo micursor.ico la url a la imagen del cursor.

Nos vamos a CSS!

[JavierB]

Hola ratamaster

Puedes usar Css para cambiar el cursor por uno que te hayas creado tú. Tienes que tener la extensión .cur (creo que también funciona con .ani)

<style type="text/css">
body {cursor:url('tucursor.cur')}
</style>

Saludos,

[JavierB]

¡Cachis! se me ha vuelto a adelantar KarlanKas. Desde que le ha cogido el tranganillo al respondedor interespacial de post...

[ratamaster]

Disculpen, no me quedó algo claro, tiene que ser de extensión *.ico, o *.cur
Gracias

[KarlanKas]

Todo el mundo sabe que los seres hexópodos son mucho más rápidos que los caballos... aunque sean de carreras! Me ha dado tiempo a contestar y mover el mensaje de foro antes de que terminaras de contestar...

En cualquier caso ha estado ahí ahí...

Un saludo, campeón!!


PD.- Donde sí me has ganado es en el número de mensajes!

[KarlanKas]

No, tiene que ser cur... ha sido un lapsus de mi persona!

[JavierB]

Iniciado por KarlanKas

No, tiene que ser cur... ha sido un lapsus de mi persona!

Pues resulta que en IE también sirve un icono (.ico), yo tampoco lo sabía, pero ante la duda, la más... quiero decir que lo he probado y funciona. En Firefox no funciona con ninguno, ya se habló del tema en otro mensaje. En otros navegadores lo ignoro

Iniciado por KarlanKas

Me ha dado tiempo a contestar y mover el mensaje de foro antes de que terminaras de contestar...

Ssstupendo, así me he ahorrado reportar el mensaje.

Saludos,

[Bunker]

hola rata master prueba con este esta bueno


<SCRIPT LANGUAGE="JavaScript">
<!-- Trio 3 Script by [email protected]

//Choose colours and size of effect !!
var a_Colour='fff000';
var b_Colour='00ff00';
var c_Colour='ff00ff';
var Size=120;
//Alter nothing below !!

var YDummy=new Array(),XDummy=new Array(),xpos=0,ypos=0,ThisStep=0;step=0.6;
if (document.layers){
window.captureEvents(Event.MOUSEMOVE);
function nsMouse(evnt){
xpos = window.pageYOffset+evnt.pageX+6;
ypos = window.pageYOffset+evnt.pageY+16;
}
window.onMouseMove = nsMouse;
}
else if (document.all)
{
function ieMouse(){
xpos = document.body.scrollLeft+event.x+6;
ypos = document.body.scrollTop+event.y+16;
}
document.onmousemove = ieMouse;
}

function swirl(){
for (i = 0; i < 3; i++)
{
YDummy[i]=ypos+Size*Math.sin((1*Math.sin((ThisStep)/10))+i*2)*Math.sin((ThisStep)/4);
XDummy[i]=xpos+Size*Math.cos((1*Math.sin((ThisStep)/10))+i*2)*Math.sin((ThisStep)/4);
}
ThisStep+=step;
setTimeout('swirl()',10);
}

var amount=10;
if (document.layers){
for (i = 0; i < amount; i++)
{
document.write('<layer name=nsa'+i+' top=0 left=0 width='+i/2+' height='+i/2+' bgcolor='+a_Colour+'></layer>');
document.write('<layer name=nsb'+i+' top=0 left=0 width='+i/2+' height='+i/2+' bgcolor='+b_Colour+'></layer>');
document.write('<layer name=nsc'+i+' top=0 left=0 width='+i/2+' height='+i/2+' bgcolor='+c_Colour+'></layer>');
}
}
else if (document.all){
document.write('<div id="ODiv" style="position:absolute;top:0px;left:0px">'
+'<div id="IDiv" style="position:relative">');
for (i = 0; i < amount; i++)
{
document.write('<div id=x style="position:absolute;top:0px;left:0px;width:'+ i/2+';height:'+i/2+';background:'+a_Colour+';font-size:'+i/2+'"></div>');
document.write('<div id=y style="position:absolute;top:0px;left:0px;width:'+ i/2+';height:'+i/2+';background:'+b_Colour+';font-size:'+i/2+'"></div>');
document.write('<div id=z style="position:absolute;top:0px;left:0px;width:'+ i/2+';height:'+i/2+';background:'+c_Colour+';font-size:'+i/2+'"></div>');
}
document.write('</div></div>');
}
function prepos(){
var ntscp=document.layers;
var msie=document.all;
if (document.layers){
for (i = 0; i < amount; i++)
{
if (i < amount-1)
{
ntscp['nsa'+i].top=ntscp['nsa'+(i+1)].top;ntscp['nsa'+i].left=ntscp['nsa'+(i+1)].left;
ntscp['nsb'+i].top=ntscp['nsb'+(i+1)].top;ntscp['nsb'+i].left=ntscp['nsb'+(i+1)].left;
ntscp['nsc'+i].top=ntscp['nsc'+(i+1)].top;ntscp['nsc'+i].left=ntscp['nsc'+(i+1)].left;
}
else
{
ntscp['nsa'+i].top=YDummy[0];ntscp['nsa'+i].left=XDummy[0];
ntscp['nsb'+i].top=YDummy[1];ntscp['nsb'+i].left=XDummy[1];
ntscp['nsc'+i].top=YDummy[2];ntscp['nsc'+i].left=XDummy[2];
}
}
}
else if (document.all){
for (i = 0; i < amount; i++)
{
if (i < amount-1)
{
msie.x[i].style.top=msie.x[i+1].style.top;msie.x[i].style.left=msie.x[i+1].style.left;
msie.y[i].style.top=msie.y[i+1].style.top;msie.y[i].style.left=msie.y[i+1].style.left;
msie.z[i].style.top=msie.z[i+1].style.top;msie.z[i].style.left=msie.z[i+1].style.left;
}
else
{
msie.x[i].style.top=YDummy[0];msie.x[i].style.left=XDummy[0];
msie.y[i].style.top=YDummy[1];msie.y[i].style.left=XDummy[1];
msie.z[i].style.top=YDummy[2];msie.z[i].style.left=XDummy[2];
}
}
}
setTimeout("prepos()",10);
}
function Start(){
swirl(),prepos()
}
window.onload=Start;
// -->
</SCRIPT>

si no te sirve busca en esta direccion:
http://javascripts.astalaweb.com/Cur...rat%C3%B3n.asp


suerte!!!

[Chriss]

y la pregunta clave es:

Con que programa logramos hacer imagenes con extensión .cur?

Porque con el photoshop no aparece la opción.

[ratamaster]

esa es una buena pregunta

[JavierB]

Hola Chriss y ratamaster

Seguro que en Google encontrais alguno que os guste.

Saludos, :adios.

[terrariomania]

Yo he empezado a usar hoy el Microangelo 98, por si les sirve. Ya he conseguido varios punteros y ponerlos en el site.

Ahora tengo una duda que he publicado en CSS y es como cambiar el puntero por otro en una palabra o imágen determinada (predón, lo que más me interesa es como poner el cursor de selección de texto). El post es:

http://desaweb.forosdelweb.com/showthread.php?t=362271

Un saludo.

[Jorolo]

Hola javierB, hola a todos.
Me sorprenden tus palabras. Puede que las interprete mal.

Iniciado por JavierB

Pues resulta que en IE también sirve un icono (.ico), yo tampoco lo sabía, pero ante la duda, la más... quiero decir que lo he probado y funciona. En Firefox no funciona con ninguno, ya se habló del tema en otro mensaje. En otros navegadores lo ignoro

El soporte que da IE a la propiedad cursor es de pena (solo ciertos tipos de archivos), por contra el soporte que le da FF es de cine (CSS3).

¿A que te refieres cuando dices "En Firefox no funciona con ninguno"?

[JavierB]

Hola Jorolo

Me refería a que no he conseguido que funcionen los cursores personalizados en Firefox, además acabo de probarlo en Opera y tampoco marchan:

body {cursor: url('cursor.cur')}

Saludos,

[Jorolo]

{cursor: url('cursor.cur')}

No funciona porque está mal escrito. (otra de las trampas del IE)

Es obligatorio terminar la declaración con una palabra clave.

Esto sí funciona en FF, Opera y cualquier navegador serio:
{cursor: url('cursor.cur'), help;}

Y esto tambien:
{cursor: url('cursor.gif'), help;}
{cursor: url('cursor.bmp'), help;}
{cursor: url('cursor.jpg'), help;}
etc...

[JavierB]

Esto no lo sabía, muchas gracias por la aclaración Jorolo. Ahora si que me ha funcionado en Firefox pero en Opera sigue sin salir bien.

Saludos,

[Jorolo]

hola de nuevo.

Dos cosas.

Supongo que no hace falta comentarlo, pero...
{cursor: url(), help;}
o
{ cursor: url('imagen-inexistente.formato-desconocido'), url(), help; } /* correjido */
También funcionan, por eso es obligatoria la palabra clave.



En FF y otros es posible gracias a CSS3 posicionar la imagen con las típicas coordenadas (x y)

Cread un archivo html con el siquiente código, sin añadir ni quitar nada.
Os recomiendo que useís la imagen del código: 'desarrolloweblogo.jpg', es la rana naranja del abatar de terrariomania.

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
		"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'> 
<title>Posicionando punteros</title>
<style type="text/css"> /* el borde es para acentuar el efecto */
p { border: solid red; }
 
#auto { cursor: url(desarrolloweblogo.jpg) 100 0, auto; }
#text { cursor: url(desarrolloweblogo.jpg) 0 100, text; }
#wait { cursor: url(desarrolloweblogo.jpg) 0 0, wait; }
#help { cursor: url(desarrolloweblogo.jpg) 100 100, help; }
</style>

<p id='auto'>auto - abajo a la izquierda</p>
<p id='text'>text - arriba a la derecha</p>
<p id='wait'>wait - abajo a la derecha</p>
<p id='help'>help - arriba a la izquierda</p> 

[Jorolo]

¡Como sois!

Como es que nadie me avisa de que el codigo está mal.

El posicionamiento funciona (de eso se trataba) pero el borde no se ve por culpa de un comentario html dentro del style. Ahora lo arreglo.

Moraleja: no comentes el código despues de probarlo, pruebalo despues de comentarlo.