Foros del Web » Creando para Internet » CSS »

cambiar puntero

Estas en el tema de cambiar puntero en el foro de CSS en Foros del Web. 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...
  #1 (permalink)  
Antiguo 28/03/2005, 08:35
 
Fecha de Ingreso: octubre-2004
Ubicación: En algún lugar de la República Oriental del Uruguay
Mensajes: 366
Antigüedad: 13 años, 1 mes
Puntos: 0
cambiar puntero

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
  #2 (permalink)  
Antiguo 28/03/2005, 08:47
Avatar de KarlanKas
Moderador extraterrestre
 
Fecha de Ingreso: diciembre-2001
Ubicación: Madrid
Mensajes: 6.987
Antigüedad: 16 años
Puntos: 60
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!
__________________
Cómo escribir

No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia.
  #3 (permalink)  
Antiguo 28/03/2005, 08:47
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
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,
  #4 (permalink)  
Antiguo 28/03/2005, 08:49
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
¡Cachis! se me ha vuelto a adelantar KarlanKas. Desde que le ha cogido el tranganillo al respondedor interespacial de post...
  #5 (permalink)  
Antiguo 28/03/2005, 08:53
 
Fecha de Ingreso: octubre-2004
Ubicación: En algún lugar de la República Oriental del Uruguay
Mensajes: 366
Antigüedad: 13 años, 1 mes
Puntos: 0
Disculpen, no me quedó algo claro, tiene que ser de extensión *.ico, o *.cur
Gracias
  #6 (permalink)  
Antiguo 28/03/2005, 08:55
Avatar de KarlanKas
Moderador extraterrestre
 
Fecha de Ingreso: diciembre-2001
Ubicación: Madrid
Mensajes: 6.987
Antigüedad: 16 años
Puntos: 60
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!
__________________
Cómo escribir

No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia.
  #7 (permalink)  
Antiguo 28/03/2005, 08:56
Avatar de KarlanKas
Moderador extraterrestre
 
Fecha de Ingreso: diciembre-2001
Ubicación: Madrid
Mensajes: 6.987
Antigüedad: 16 años
Puntos: 60
No, tiene que ser cur... ha sido un lapsus de mi persona!
__________________
Cómo escribir

No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia.
  #8 (permalink)  
Antiguo 28/03/2005, 09:07
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
Cita:
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
Cita:
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,
  #9 (permalink)  
Antiguo 29/03/2005, 12:33
Avatar de Bunker
(Desactivado)
 
Fecha de Ingreso: marzo-2005
Ubicación: .::Florida-Usa::.
Mensajes: 234
Antigüedad: 12 años, 8 meses
Puntos: 0
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!!!
  #10 (permalink)  
Antiguo 29/03/2005, 16:12
Avatar de Chriss  
Fecha de Ingreso: junio-2004
Mensajes: 105
Antigüedad: 13 años, 5 meses
Puntos: 0
y la pregunta clave es:

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

Porque con el photoshop no aparece la opción.
  #11 (permalink)  
Antiguo 31/03/2005, 09:39
 
Fecha de Ingreso: octubre-2004
Ubicación: En algún lugar de la República Oriental del Uruguay
Mensajes: 366
Antigüedad: 13 años, 1 mes
Puntos: 0
esa es una buena pregunta
  #12 (permalink)  
Antiguo 31/03/2005, 10:13
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
Hola Chriss y ratamaster

Seguro que en Google encontrais alguno que os guste.

Saludos, :adios.
  #13 (permalink)  
Antiguo 08/01/2006, 08:26
Avatar de terrariomania  
Fecha de Ingreso: abril-2004
Mensajes: 145
Antigüedad: 13 años, 7 meses
Puntos: 0
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.
__________________
Si mis bichos hablasen me mandarían a tomar por saco. Mi mujer si que habla.
  #14 (permalink)  
Antiguo 08/01/2006, 12:22
 
Fecha de Ingreso: octubre-2005
Mensajes: 536
Antigüedad: 12 años, 1 mes
Puntos: 1
Hola javierB, hola a todos.
Me sorprenden tus palabras. Puede que las interprete mal.

Cita:
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"?
  #15 (permalink)  
Antiguo 08/01/2006, 12:44
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
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,
  #16 (permalink)  
Antiguo 08/01/2006, 13:28
 
Fecha de Ingreso: octubre-2005
Mensajes: 536
Antigüedad: 12 años, 1 mes
Puntos: 1
{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...
  #17 (permalink)  
Antiguo 08/01/2006, 13:46
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
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,
  #18 (permalink)  
Antiguo 08/01/2006, 15:54
 
Fecha de Ingreso: octubre-2005
Mensajes: 536
Antigüedad: 12 años, 1 mes
Puntos: 1
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> 

Última edición por Jorolo; 01/03/2006 a las 12:39 Razón: info erronea
  #19 (permalink)  
Antiguo 09/01/2006, 11:28
 
Fecha de Ingreso: octubre-2005
Mensajes: 536
Antigüedad: 12 años, 1 mes
Puntos: 1
¡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.
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

SíEste tema le ha gustado a 1 personas (incluyéndote)




La zona horaria es GMT -6. Ahora son las 02:44.