Cambiar el cursor del ratón

Email this to someoneShare on FacebookShare on Google+Share on LinkedInTweet about this on Twitter

Aunque parezca que es una práctica que ya no se lleva a cabo, cambiar el cursor o puntero del ratón puede servirnos en más de una ocasión para mejorar la accesibilidad en nuestra página, así como señalar por ejemplo, cuando existe un enlace con el puntero de la mano, cunado se muestre algún mensaje de ayuda con el puntero de una interrogación o simplemente punteros con flechas de todo tipo.

Para conseguir adaptar el puntero o cursor del ratón a cada situación nos bastará con añadir un estilo en nuestra hoja de CSS para forzar a nuestro navegador y que de este modo no se rija por las normas convencionales de los punteros, sino con lo indicado en la hoja de estilos.

Hay dos posibilidades de cambiar el cursor en nuestra web, para todo el documento o para partes del documento determinadas.

Cambiar el cursor del ratón a todo el do cumento:

<html>
<title>Cambiar el cursor del raton</title>
<head>
<style type="text/css">
<!--
body {cursor: crosshair}
-->
</style>
</head>
<body>
</body>
</html>

Cambiar el cursor del ratón a algunas partes dentro de un documento:

<html>
<title>Cambiar el cursor del raton</title>
<head>
</head>
<body>
<h1 style="cursor: pointer">pointer (mano)</h1>
<h1 style="cursor: move">move (cruz con flecha)</h1>
<h1 style="cursor: help">help (signo de pregunta)</h1>
<h1 style="cursor: default">default (flecha)</h1>
<h1 style="cursor: crosshair">crosshair (cruz)</h1>
<h1 style="cursor: text">text (I-beam)</h1>
<h1 style="cursor: wait">wait (reloj de arena)</h1>
<h1 style="cursor: nw-resize">nw-resize (flecha al noroeste)</h1>
<h1 style="cursor: ne-resize">ne-resize (flecha al noreste)</h1>
<h1 style="cursor: se-resize">se-resize (flecha hacia el sudeste)</h1>
<h1 style="cursor: sw-resize">ne-resize (flecha hacia el sudoeste)</h1>
<h1 style="cursor: n-resize">n-resize (flecha hacia arriba)</h1>
<h1 style="cursor: s-resize">s-resize (flecha hacia abajo)</h1>
<h1 style="cursor: e-resize">e-resize (flecha a la derecha)</h1>
<h1 style="cursor: w-resize">w-resize (flecha a la izquierda)</h1>
</body>
</html>

Recordar que también se puede personalizar el puntero del ratón mediante, una imagen o gif animado.

Sé la primera persona en comentar

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

De conformidad con lo establecido en la LOPD, Adpv Advertising Provider S.L. garantiza la adopción de las medidas necesarias para asegurar el tratamiento confidencial de los datos de carácter personal. Así mismo le informamos de la inclusión de sus datos en un fichero con la finalidad de mantener su relación negocial o contractual con Adpv Advertising Provider S.L. y de la posibilidad de ejercer los derechos de acceso, rectificación, cancelación y oposición en la siguiente dirección: Ercilla, 26, 1Dcha., 48011, Bilbao, Bizkaia. Privacidad.