Como cambiar el cursor del ratón por imágenes personalizadas

Anteriormente vimos Como colocar en el puntero el escudo del Sevilla FC y en este artículo vamos a ver como podemos trabajar con cursores personalizados, es decir, cómo podemos cambiar el puntero del ratón para incorporar cualquier imagen y personalizar un poco más el aspecto de nuestro sitio web.
Para ello solo tendremos que disponer de un editor de imágenes, photoshop, paint (gratuito), etc.. y la imagen que deseemos añadir.
Yo uso photoshop y os lo muestro paso a paso:
1.- Guardamos la imagen base en nuestro PC (puntero sobre la imagen-click derecho-guardar imagen como)

Imagen base

2.- Abrimos la imagen base en photoshop y la imagen a mostrar como logo (debe estar en formato gif o png).

Como lo normal es que la imagen a mostrar como logo sea mayor que la base (40x40px) tendremos que reducir hasta 20px dicha imagen. Click en imagen a mostrar-tamaño de la imagen-colocamos 20px de anchura y 20px de altura y Ok.


El siguiente paso consistiría en introducir la imagen logo dentro de la imagen base
Click en imagen logo- Selección-Todo, ahora al apartado Edición-Copiar.
Ahora click en imagen base-Edición-Pegar (guardamos en formato gif) y ya la tendremos lista.

Ahora lo siguiente sería subir dicha imagen a cualquier hosting, lo normal sería Picassa, y copiamos la url.
Para colocarlo en vuestro blog, seguir estos pasos:
DISEÑO-EDICION HTML-buscáis el siguiente código: </BODY> y justamente encima de él pegamos este otro:

<style>HTML,BODY{cursor: url("url de vuestra imagen"), url("url de vuestra imagen"), auto;}</style>

Lo podéis ver funcionando en este blog
Nota: Los cursores de tipo imagen gif solo son compatibles con Mozilla Firefox y Google Chrome y no en Internet Explorer.