04 abril 2013

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)
cursores personalizados
Imagen base

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

cursores personalizados

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.

cursores personalizados

cursores personalizados

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.

cursores personalizados

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.




Escrito por:

Mi nombre es Antonio, soy sobre todo Sevillista y apasionado con los blog desde el 2007.

Sígueme en: | Facebook | Twitter | Google+

Por favor, comente de acuerdo al tema del artículo.
Serán removidos todos los Comentarios con enlaces.
Si quieres recibir los nuevos comentarios marca "Avisarme"