Cambiar el cursor del Mouse
| Autor: Fabian Muller ( http://www.webexperto.com/ - http://www.webexperto.com ) - 28/01/2004 |
Las hojas de estilo poseen una propiedad que permite cambiar la imagen del puntero del mouse.
Listas de cursores
Cursores disponibles por defecto:
| Nombre |
Muestra |
| default |
|
| crosshair |
|
| pointer |
|
| move |
|
| nw-resize |
|
| ne-resize |
|
| n-resize |
|
| e-resize |
|
| help |
|
| text |
|
| wait |
|
Definiendo el cursor
Al igual que todas las propiedades del lenguaje CSS, es p definir el objeto aplicándolo a todo el documento o solo a una parte del mismo.
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>
<p style="cursor: default">Cursor default</p>
<p style="cursor: crosshair">Cursor crosshair</p>
<p style="cursor: pointer">Cursor pointer</p>
<p style="cursor: move">Cursor move</p>
<p style="cursor: nw-resize">Cursor nw-resize</p>
<p style="cursor: ne-resize">Cursor ne-resize</p>
<p style="cursor: n-resize">Cursor move</p>
<p style="cursor: e-resize">Cursor move</p>
<p style="cursor: help">Cursor move</p>
<p style="cursor: text">Cursor move</p>
<p style="cursor: wait">Cursor wait</p>
</body>
</html>
Personalizar cursor
También es p utilizar un cursor personalizado:
<html>
<title>Cambiar el cursor</title>
<head>
<style type="text/css">
<!--
body {cursor : url("ruta/harrow.cur")}
-->
</style>
</head>
<body>
</body>
</html> | 
