Cambio de cursor sobre una imagen o cualquier otro elemento

sábado, 6 de febrero de 2010
Con este sencillo truco conseguirás que al poner sobre una imagen el cursor, éste cambie su aspecto.
Ejemplo:




Si bien el códido básico para conseguir la aparición de una imagen es éste:

<img src="AQUÍ-LA-URL-DE-LA-IMAGEN">

El código que tendrías que añadir para lograr el cambio del puntero sería el siguiente:

style="cursor:AQUÍ-LA-PROPIEDAD;"

1. Que añadido al código de la imagen quedaría así:
<img style="cursor:AQUÍ-LA-PROPIEDAD;" src="AQUÍ-LA-URL-DE-LA-IMAGEN">
  • AQUÍ-LA-PROPIEDAD debe ser cambiada por: url(url-del-cursor) en caso de que quieras que el cursor sea uno alojado en internet como por ejemplo: http://cuw.iespana.es/archivos/bob08.cur, que tendría que sustituir a url-del-cursor, o bien por uno de los siguientes términos, que pertenecen a punteros predeterminados del sistema:
default
pointer
move
crosshair
nw-resize
ne-resize
n-resize
e-resize
help
wait
text

2. También puedes hacerlo sobre una imagen con enlace:
<a href="URL-DEL-ENLACE"><img style="cursor:AQUÍ-LA-PROPIEDAD;" src="AQUÍ-LA-URL-DE-LA-IMAGEN"></a>
3. O sobre un simple enlace de texto:
<a style="cursor:AQUÍ-LA-PROPIEDAD;" href="URL-DEL-ENLACE">TEXTO-DEL-ENLACE</a>
En resumen, cambiar el cursor es muy fácil, y se puede hacer en cualquier elemento (imágenes, textos, pero también tablas, divs, etc.), y basta con agregarle a él el atributo style con el "parámetro" cursor y a continuación su propiedad.

Continuando con los cursores, dentro de poco explicaremos como cambiarlo en todo el blog, siguiendo un procedimiento similar... 

¡Un saludo!

Visto en Hacktime

4 comentarios:

  • Ascesino96

    Y no solo con esas propiedades, sino que también se puede hacer con una imagen .cur... muy bueno el tutorial, muchas gracias, nos vemos!

  • La Trucoteca de Blogs

    Hola Ascesino96
    Bueno sí, la verdad es que también está explicado lo que dices :)
    Gracias por tu visita :D
    ¡Un saludo!

  • Jéssica YK

    Le entrada está muy interesante; yo sabía que se podía cambiar el puntero y conocía sólo el pointer y move, pero el resto no.

    Será motivo para probarlos en los post :)

    Saludos !!

  • La Trucoteca de Blogs

    Hola Jessica!
    Gracias por tu visita, nos alegra que te guste la entradica :)
    ¡Un fuerte abrazo!

  • Ir Arriba