 |
|
|
|
|
|
Portada | Monotemáticos | Secciones | Desarrolladores | Comunidad | Servicios | Servicios profesionales | RSS | |
||
|
||||
|
|
|||
 |
|
 |
||
|
||||
Cambiando el cursor del mouse
Cómo cambiar con css las opciones por defecto de los cursores al pasar por ciertas partes de la página.
19/8/05 - Nuestro sistema operativo posee cursores por defecto. Cursores nos referimos al puntero del ratón: la típica flechita o cualquier otro dibujo que puede tener.
En Windows podemos encontrar varios cursores que se activan cuando pasamos por “ciertas zonas” de nuestra pantalla. Por ejemplo, cuando nos posicionamos sobre un link, la típica flechita (denominada default en CSS) cambia por la manito (pinter). Como en el ejemplo anterior, podemos encontrar decenas de situaciones en donde nuestro puntero cambia de imagen.
Con la ayuda de las hojas de estilo podemos forzar a nuestro sistema operativo que no se rija más sobre las normas convencionales de los punteros; logrando así un atractivo diseño web en donde el puntero de nuestro mouse puede llegar a ser hasta una imagen de nuestra propia creación.
A continuación pueden observar la lista de los cursores disponibles por defecto en Windows:
- default (flecha)
- crosshair (cruz)
- e-resize (flecha que apunta a la derecha)
- hand (mano)
- help (signo de pregunta)
- move (cruz con flechas en los extremos)
- n-resize (flecha que apunta hacia arriba)
- ne-resize (flecha que apunta al noreste)
- nw-resize (flecha que apunta al noroeste)
- pointer (mano)
- s-resize (flecha que apunta hacia abajo)
- se-resize (flecha que apunta hacia el sudeste)
- sw-resize (flecha que apunta hacia el sudoeste)
- text (I-beam)
- w-resize (flecha que apunta a la izquierda)
- wait (reloj de arena)
A todo el documento:
<html>
<title>Cambiar el cursor</title>
<head>
<style type="text/css">
<!--
body {cursor: pointer}
-->
</style>
</head>
<body>
</body>
</html>
A algunos sectores del documento:
<html>
<title>Cambiar el cursor</title>
<head>
</head>
<body>
<h4 style="cursor: default">default</h4>
<h4 style="cursor: crosshair">crosshair</h4>
<h4 style="cursor: pointer">pointer</h4>
<h4 style="cursor: move">move</h4>
<h4 style="cursor: nw-resize">nw-resize</h4>
<h4 style="cursor: ne-resize">ne-resize</h4>
<h4 style="cursor: n-resize">n-resize</h4>
<h4 style="cursor: e-resize">e-resize</h4>
<h4 style="cursor: help">help</h4>
<h4 style="cursor: text">text</h4>
<h4 style="cursor: wait">wait</h4>
</body>
</html>
También es posible utilizar un cursor personalizado:
<html>
<title>Cambiar el cursor</title>
<head>
<style type="text/css">
<!--
body {cursor : url("find.cur")}
-->
</style>
</head>
<body>
</body>
</html>
Ver ejemplo en marcha
+ 1 categoria relacionada
+ 1 comentario (Añadir)
| Autoría, licencia y acciones sobre este artículo | ||||||
|
Informe de Federico Elgarte*
URL: http://www.cssboulevar.com.ar/ Atención: Copyright. Este artículo no se puede reproducir sin la autorización expresa del autor. * Para consultas técnicas utilizar la lista de correo.
|
| Los comentarios de los visitantes son para ampliar la información del artículo. Cualquiera puede participar. |
| Se muestra un comentario revisado |
De este modo si en vez de esto:
{cursor : url("personalizado.cur")}
Ponemos esto:
{cursor : url("personalizado.cur"),auto;}
Tendremos nuestro cursor personalizado en Firefox.
Por cierto, Firefox es infinitamente mejor que IE...pero bueno eso es otra historia.
 | Añadir un comentario del artículo |
| Enlaces: |
| Maestrosdelweb |
Ir arriba
Lectura recomendada  Compra este libro en Agapea, la librería urgente a domicilio. |
||||||||
Tienda DesarrolloWeb
