Cambiar el cursor al posarse sobre un elemento
Escrito por J.F. el Lunes, 2 de Julio del 2007 a las 15:33
Utilizando CSS también es posible cambiar el cursor, por ejemplo al posarse sobre una imagen, o al posicionarse sobre un hipervínculo. También podemos cambiar el cursor por defecto definiéndolo en el apartado del body de nuestra hoja de estilos. Pero veamos antes los tipos de cursores predefenidos que podemos usar:
- cursor: auto (utiliza un cursor dado por el usuario)
- cursor: crosshair (el cursor se convierte en una cruz)
- cursor: default (el cursor permanece como es siempre)
- cursor: e-resize (una flecha que apunta a la derecha)
- cursor: hand (la tradicional mano)
- cursor: help (el signo de pregunta)
- cursor: move (una cruz con flechas en los extremos)
- cursor: n-resize (una flecha apuntando hacia arriba o hacia el norte)
- cursor: ne-resize (una flecha apuntando hacia el noreste)
- cursor: nw-resize (una flecha que apunta hacia el noroeste)
- cursor: pointer (nuevamente el puntero)
- cursor: s-resize (una flecha que apunta hacia abajo o al sur)
- cursor: se-resize (una flecha que apunta hacia el sudeste)
- cursor: sw-resize (una flecha que apunta hacia el sudoeste)
- cursor: text (se muestra como el fin de un I-beam)
- cursor: w-resize (una flecha apuntando hacia el oeste o hacia la izquierda)
- cursor: wait (un reloj de arena)
Éstos cursores pueden aplicarse a:
Todo el documento:
CSS:
-
<head>
-
<style type="text/css">
-
<!--
-
body {cursor: help}
-
-->
-
</style>
-
</head>
Elemento específicos:
Como por ejemplo:
Imagen
HTML:
-
<img src="imagen.gif" style="cursor:hand">
Hipervínculo
HTML:
-
<a href="http://yournightmare86.byethost18.com/wordpress/" style="cursor:hand">Informática Práctica</a>
Utilizar cursores personalizados:
CSS:
-
<style type="text/css">
-
body
-
{
-
cursor: url(cursor_personalizado.cur);
-
}
-
</style>
Ten en cuenta que el formato del cursor debe ser una imagen con extensión .ico, .cur.
Categoria: CSS
- Añadir este post a
- Del.icio.us -
- Meneame -
- Digg -
- Webeame
No hay comentarios
Entradas relacionadas
Deja un comentario
Escribir un comentario
