[Tips] Como cambiar el ícono del cursor en una página web.

Una de las consultas que me han hecho es ver como se puede cambiar el cursor del mouse en una página web, tal cual lo hacen el Cut the Rope , el excelente juego hecho en HTML5 bajo IE9, si , como escuchas IE9 Sonrisa, puedes verlo en http://www.cuttherope.ie/

Vamos a copiar los cursores de la app cuttherope, para eso voy a ocupar el depurador de IE9, que obtenemos presionado f12

image

Busqué los archivos cur y obtuve los  archivos handcursor.cur y cursor.cur

image

<!DOCTYPE html>
<html>
       <head>
          <title>Ejemplo de Cursor</title>
          <style type="text/css">
              body{
                  cursor:url(cursor.cur);
               }

               #cara{

                 cursor:url(handcursor.cur);

               }

       </style>

       </head>

       <body>

           <h1>Trabajo con Cursor </h1>

           <img  id="cara" src="cara1.png" />

       </body>

</html>

Se ve que eo body tiene el cursor (cursor.cur) y la imagen el cursor handcursor. Ahora bien, al momento de ejecutar la página en un servidor web (no localmente como archivo html), vemos el resultado que presento en el siguiente video.

Espero que te sirva!, y de repente , quien sabes, te animas a hacer un juego Sonrisa

Saludos!!
@chalalo

Un comentario en “[Tips] Como cambiar el ícono del cursor en una página web.”

Deja un comentario

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