La propiedad de CSS, cursor, permite cambiar el aspecto del cursor sobre uno de los elementos presentes en una página web y, por tanto, modificar el que aparece por defecto. De este modo, el cliente visualizará de manera automática el tipo de cursor que hayas elegido para tu sitio web. En este artículo te enseñamos cómo hacerlo.
¿Cómo cambiar el aspecto de tu cursor?
Veamos en primer lugar un modelo de cómo pondríamos un cursor en forma de cruz en el cuerpo de una página:
body{ cursor:crosshair; }
Es posible dar diferentes estilos a varios elementos de la misma página. Por ejemplo, una cruz. O, como hemos visto antes para el cuerpo, un cursor en forma de reloj de arena para las imágenes y una mano para los enlaces:
body{ cursor: crosshair; } img{ cursor: wait; } a:link{ cursor: pointer; }
También es posible asignar un cursor personalizado a una página. Para ello, solo hay que poner en el código CSS la etiqueta deseada y acceder a la carpeta en la cual se encuentra tu cursor:
cursor: url(tu_cursor_personalizado.cur'), pointer;
Existen muchos programas capaces de crear cursores personalizados, pero te recomendamos partir de aquellos que están ya hechos y modificarlos a tu gusto. Eso sí, siempre teniendo cuidado de hacer una copia de seguridad antes de comenzar (en Windows, ello puede hacerse en C:windowscursors).
Algunos ejemplos de estos programas son: CursorFX, IconArt y ArtCursors.
Nota: El tamaño de los cursores no debe superar 32x32 px.
¿Qué atributos posibles de esta propiedad se pueden realizar?
Aceptados por todos los navegadores
- auto: Aspecto idéntico al del cursor predeterminado en la etiqueta que posee el atributo, no cambia nada.
- default: Cursor predeterminado del navegador.
- pointer: Cursor en forma de mano.
- text: Cursor de edición de texto.
- help: Cursor de ayuda.
- wait: Cursor de espera.
- progress: Cursor de progresión.
- move: Cursor de desplazamiento.
- crosshair: Cursor en forma de cruz.
Cursores de redimensionamiento
- n-resize: Flecha apuntando hacia el norte o hacia arriba.
- s-resize: Flecha apuntando al sur o hacia abajo.
- e-resize: Flecha apuntando a la derecha.
- w-resize: Flecha apuntando a la izquierda.
- ne-resize: Flecha apuntando al noreste.
- nw-resize: Flecha apuntando al noroeste.
- se-resize: Flecha apuntando al sudeste.
- sw-resize: Flecha apuntando al sudoeste.
No aceptado por todos los navegadores
Firefox y Opera, entre otros, ignoran estas directivas:
- inherit: Cursor similar al de la etiqueta de la misma familia.
- not-allowed: Cursor circular con una barra diagonal.
- no-drop: Cursor en forma de mano con los dedos extendidos y un círculo con una barra diagonal.
- col-resize: Cursor compuesto de una línea vertical con una flecha en cada extremo.
- row-resize: Cursor compuesto de una línea horizontal con una flecha en cada extremo.
Webmaster
- Cambiar cursor css
- Cambiar el cursor css
- Cambiar puntero css
- Windows 8.1: Personalizar el puntero del 'mouse'
- Como recuperar mi cuenta en facebook si cambie de número [resuelto] > Foros - Facebook
- Instagram no me deja cambiar la foto de perfil [resuelto] > Foros - Mensajerías y chat
- Cambiar administración hacia plm
- Recibir el código de Facebook en otro número de teléfono [resuelto] > Foros - Facebook
- Cómo quitar el subrayado de los enlaces en HTML/CSS
- Cómo colocar un icono o favicon en HTML
- Por qué no aparecen imágenes en una página web
- Cómo adaptar una página web a diferentes resoluciones
- PhpMyAdmin: #1045 Access denied for user root@localhost
- Cómo crear una DIV transparente con CSS
- Cómo modificar la altura de un elemento HTML en Javascript
- Php/xhtml: cómo mostrar el código de páginas web
- Cómo insertar un PDF en una página web
- Índice indefinido en PHP: cómo solucionar errores
- Cómo redireccionar una página en PHP
- Cómo verificar el formato de una dirección de correo
- Cómo obtener la altura de un elemento HTML en Javascript
- Cómo verificar el dominio de una dirección de correo con PHP
- Cómo integrar la función split() en Javascript
- Cómo detectar la resolución de la pantalla en PHP
- Las normas en ergonomía de software
- Cuál es la diferencia entre display:none y visibility:hidden
- Cómo insertar espacios consecutivos en HTML
- Cómo alojar imágenes en la Web con ImageShack
- Cómo crear una página web dinámica y bonita
- Cómo validar una página HTML
- Fuentes para páginas web: tipografía recomendada, genérica
- Cómo instalar Joomla en Wamp
- Cómo obtener la concatenación de cadenas en Javascript
- Cómo hacer un formulario en línea
- Criterios Ergonómicos: métodos de evaluación
- Apache y Windows: cómo crear un host virtual