|
||||
|
|
|
|
|
|
|
|||
|
|
|||
|
||||
Home - WebScript - Efectos - Cursores con estilo
Cursores con estilo
por Luciano Moreno, webmaster de HTMLWeb.
Cursores y CSS
El cursor es una imagen o conjunto de ellas que acompañan al puntero del ratón en su recorrido por la ventana del navegador, indicando el punto exacto de actividad del mismo y, generalmente, el tipo de zona sobre la que se encuentra.
Los sistemas operativos incluyen por defecto uno o más juegos de cursores asociados, cada uno de los cuales aparece en pantalla en ocasiones especiales de actividad del sistema. En sistemas Windows, por ejemplo, el cursor adopta en su estado "normal" la forma de una flecha blanca con borde negro, pero cuando se sitúa sobre un hipervínculo se transforma en una mano, y cuando se posiciona sobre un texto adopta una forma de I.
Internet Explorer admite unos atributos CSS específicos que permiten al diseñador definir qué tipo de cursor va a aparecer en pantalla dependiendo de la zona sobre la que el puntero se posicione, permitiendo asociar un cursor del sistema específico para cada elemento de la página (párrafo, capa, enlace, celda de tabla, etc.). Los diferentes tipos de cursores admitidos y su configuración mediante CSS ya lo estudiamos en un artículo anterior.
Sin duda alguna, este tipo de atributos CSS son muy útiles en ciertas ocasiones, aunque limitan el posible cursor a uno de los del sistema. Ahora bien, la posibilidad de declarar un cursor específico va más allá de este pequeño grupo de cursores propios de Windows, ya que Internet Explorer permite definir como cursor una imagen externa cualquiera, con la única limitación de estar almacenada en formato CUR (ficheros gráficos de extensión .cur).
Una vez elegida una imagen en este formato propio, su asociación a un elemento cualquiera mediante CSS es muy simple, bastando utilizar para ello el atributo:
cursor:url("ruta_imagen")
Vamos a ver un ejemplo, asociando un cursor de flecha (cursorA.cur) a una clase CSS, que podremos aplicar luego a cuantos elementos de nuestra página sea necesario. Para ello escribimos en la cabecera de nuestra página el siguiente código:
<style type="text/css">
.cursorUno{cursor:url("images/cursorA.cur");}
</style>
Y ahora asociamos dicha clase a cualquier elemento de la página, en nuestro caso, al mismo BODY, para que nuestro cursor personalizado aparezca en todo momento:
<body class="cursorUno">
El resultado de este código podéis verlo en esta ventana.
Modificando el cursor dinámicamente
Rizando aún más el rizo, vamos a hora a cambiar dinámicamente el cursor personalizado. Imaginemos que diseñamos un cursor con forma de mano abierta y lo asociamos a un elemento cualquiera, por ejemplo una capa, y que deseamos que al hacer click sobre la misma y arrastrar el puntero sobre ella, el cursor cambie a una mano cerrada, consiguiendo con ello un efecto similar al de muchos programas gráficos cuando se arrastra una imagen por la ventana activa.
Definimos entonces dos clases CSS, en la primera de las cuales definimos como cursor la mano abierta, mientras que en la segunda definimos como cursor la mano cerrada. Situamos en nuestra página una capa y le asociamos la clase primera. Por último, capturamos el evento mousedown en la capa y lo usamos para cambiar la clase CSS asociada a la capa, con objeto de mostrar la mano cerrada, utilizando también el evento mouseup para retornar el sistema a su estado inicial.
El código completo necesario será entonces:
<html>
<head>
<title>HTMLWeb. WebScript. Cursores con estilo. Ejemplo
2.</title>
<style type="text/css">
.cursorDos{cursor:url("images/cursorB.cur");}
.cursorTres{cursor:url("images/cursorC.cur");}
</style>
</head>
<body>
<div
style="width:400px;height:300px;background-color:red;" class=
"cursorDos"onmousedown="this.className=
'cursorTres'"onmouseup="this.className='cursorDos'"></div>
</body>
</html>
Cuyo resultado práctico tenemos en esta ventana.
Creando ficheros CUR
Una vez vista la forma de cambiar a nuestro antojo el aspecto gráfico de los cursores (redordemos que sólo es válido para Internet Explorer), queda preguntarnos ahora de dónde sacamos los ficheros .cur necesarios.
Una alternativa es recurrir a Internet, donde existen muchos sitios web que ofrecen de forma gratuíta este tipo de gráficos. Para ello, basta acudir a Google e introducir en la caja de búsqueda "descarga+cursores".
Por otra parte, si necesitamos un cursor específico o deseamos crear nosotros mismos nuestros cursores personalizados, tendremos que utilizar algún programa que soporte este tipo de ficheros. Sin duda, el mejor de ellos es MicroAngelo, aplicación que permite crear tanto gráficos CUR como gráficos ICO, de fácil uso y que podemos descargar (la versión demo) desde:
http://download.com.com/3000-2195-10001673.html?part=50762%20&subj=dlpage&tag=button
Una vez instalado, la irterfaz de usuario muestra una rejilla de píxeles sobre la que deberemos "dibujar" nuestro cursor, teniendo especial cuidado en definir los bordes del gráfico lo más claramente posible, ya que este tipo de imágenes, por su pequeño tamaño, deben quedar perfectamente representadas.
Finalizado el proceso de construcción del cursor, sólo queda salvarlo con la extensión .cur
Cursores animados
Una última opción que nos ofrece Internet Explorer y CSS es el uso de cursores animados. Estos son un tipo especial de ficheros gráficos, similares a los GIF animados, en los que el cursor va cambiando alternativamente de aspecto. El formato de almacenamiento de los mismos es ANI, y sus ficheros se guardan con la extensión .ani
Aparte de estas peculiaridades, su introducción en una página es del todo similar a la de los cursores .cur, definiendo la ruta de localización del fichero animado en el atributo cursor de CSS:
<head>
<title>HTMLWeb. WebScript.
Cursores con estilo. Ejemplo 3.</title>
<style
type="text/css">
.cursorUno{cursor:url("nin.ani");}
</style>
</head>
<body
class="cursorUno">
</body>
</html>
Cuyo resultado práctico tenemos en esta ventana.
La obtención de cursores animados es también similar a la de los cursores normales, pudiendo recurrir a su descarga directa desde Internet o a la creación de los mismos utilizando MicroAngelo, que permite definir diferentes frames o imágenes constituyentes del cursor animado, así como el tiempo de presentación de cada uno de ellos.