Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

Imagen o icono que sigue al cursor en tu blog

Hace mucho tiempo aprendimos a incluir en el blog un truco que servía para mostrar una frase en movimiento siguiento al cursor. Dicho procedimiento solo permitía la utilización de texto y no de imágenes.

En esta entrada te presentaré un nuevo truco para conseguir que una imagen, un logotipo o un icono siga al cursor.


Imagen o icono que sigue al cursor en tu blog



Visita este blog de pruebas para ver el truco en funcionamiento.


Diseño>añadir gadget (elemento de página)>html-javascript






Pega este script:

<script type="text/javascript">
//<![CDATA[
var blimgcursor=["URL DE LA IMAGEN", , ]
var blimgespacio=[12,12]
var blimgcursor_cuant=0

if (document.getElementById || document.all)
document.write('<div id="blimgcursorid" style="position:absolute;visibility:visible;left:0px;top:100px;width:1px;height:1px"><img border="0" src="'+blimgcursor[0]+'"></div>')
function blimgcur_activo(){
if (document.getElementById)
return document.getElementById("blimgcursorid").style
else if (document.all)
return document.all.trailimagid.style
}
function blcentro(){
return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function blinvis_img(){
blimgcur_activo().visibility="hidden"
document.onmousemove=""
}
function blimg_curseg(e){
var xcoord=blimgespacio[0]
var ycoord=blimgespacio[1]
if (typeof e != "undefined"){
xcoord+=e.pageX
ycoord+=e.pageY
}
else if (typeof window.event !="undefined"){
xcoord+=blcentro().scrollLeft+event.clientX
ycoord+=blcentro().scrollTop+event.clientY
}
var docwidth=document.all? blcentro().scrollLeft+blcentro().clientWidth : pageXOffset+window.innerWidth-15
var docheight=document.all? Math.max(blcentro().scrollHeight, blcentro().clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight)
if (xcoord+blimgcursor[1]+3>docwidth || ycoord+blimgcursor[2]> docheight)
blimgcur_activo().display="none"
else
blimgcur_activo().display=""
blimgcur_activo().left=xcoord+"px"
blimgcur_activo().top=ycoord+"px"
}
document.onmousemove=blimg_curseg
if (blimgcursor_cuant>0)
setTimeout("blinvis_img()", blimgcursor_cuant*1000)
//]]>
</script>

Ahora simplemente debes reemplazar URL DE LA IMAGEN por la dirección del icono que seguirá al cursor [+].

Guarda el gadget para terminar.

Puedes encontrar una colección muy variada de iconos en esta web.

♥ Ana dice...

Buenos días guapetón, otra cosilla más para mi blog que te he copiado, anda, que, al final, más que mi blog, va a parecer tuyo, jajajaja
Gracias, muchas gracias por tantas cosillas que nos enseñas
Un besazo

Jaime Trujillo Escobedo dice...

¡Estupéndo Ana! Me encantó la carita de la geisha con el corazón ^^.

No digas eso, tu blog simplemente está "tuneado a lo grande" y por ello es especial (¡y tuyo!) ;).

Abrazotes.

♥ Ana dice...

Muchas gracias Jaime, por decirme eso de que mi blog está tuneado a lo grande y que es especial, buffff, me ha encantado :P

Ahhh, se me olvidaba, varias personas me han preguntado por el truco de la lista de blogs en movimiento y, les he pasado la dirección de tu blog, espero que no te importe, iba a hacer una entrada en mi blog, sobre ello, pero, lo dicho, si me preguntan algo, igual no se responderles, así que prefiero que lo vean directamente en tu blog, ya veo que, alguna de esas personas, se han hecho seguidoras tuyas, me alegro mucho

Hasta pronto, te mando un beso

Cocina dice...

Hola Jaime es mi primera visita al blog,he implementado la imagen que sigue al cursor,me ha quedado muy bien gracias!!solo que tengo una duda este tipo de gadget interfiere en la garga de mi blog???en definitiva quiero saber si retarda la apertura este tipo de cosas,muchas gracias espero tu respuesta!!

Jaime Trujillo Escobedo dice...

¡Gracias a ti, Ana! Me encanta leer tus comentarios.

En cuanto al truco de la lista de blogs... ¿Cómo podría importarme algo tan estupéndo? De verdad, te lo agradezco muchísimo.

Aunque en estos días estoy un poco liado con los estudios, intentaré resolver cualquier dudilla ;).

¡Abrazos!

Jaime Trujillo Escobedo dice...

Cocofansclub, este truco en particular no afecta al tiempo de carga del blog pero otros pueden hacerlo. Normalmente suelen ser los trucos que utilizan feeds o scripts externos (al no ser que únicamente tengamos uno o dos trucos de este tipo en el blog), además de las imágenes con un peso elevado, en las entradas.

Cocina dice...

GRACIAS POR TU RESPUESTA!!:D

Jaime Trujillo Escobedo dice...

¡Gracias a ti por preguntar, Cocofansclub! ☺

Osojuegos.com dice...

Hola, he querido hacer esto, per al final no me funciona. No se donde falle. :(

Osojuegos.com dice...

Alguien me ayuda? en este blog hay muchas cosas que me interesan, pero no se que estoy haciendo mal :(

Jaime Trujillo Escobedo dice...

Osojuegos, te comento que he revisado el código y no encontré error alguno. ¿Estás seguro de haber insertado bien la dirección de la imagen? ¿Qué alojamiento escogista para subir la imagen?

Arnoldo Argueta Pereira dice...

gracias por hacernos más fácil todo! solo una duda, ¿cómo hago para que la imagen no tenga fondo blanco? ya probe con una imagen .png pero no funciona.

Jaime Trujillo Escobedo dice...

Arnoldo Argueta, me temo que para producir la transparencia en una imagen tendríamos que usar Photoshop, concretamente la herramienta Borrador mágico.

Mientras tanto, puedes hacer uso de alguno de los muchos iconos que encontrarás en esta página.

Arnoldo Arguetta Pereyra dice...

Ok muchas gracias! Tengo otra duda que no he encontrado en ningun lado y seguramente tú me la puedes responder. ¿Qué debo hacer para que mi blog mantega su apariencia en distintas resoluciones de pantalla? En mi computadora se ve bien pero en portátiles y plasma se desordena. Gracias.

Jaime Trujillo Escobedo dice...

Arnoldo Argueta, tengo pensado publicar un artículo explicando en especial todo lo relacionado con el tema de las resoluciones (anchos, márgenes...).

Ahora no dispongo de demasiado tiempo ya que debo terminar mis estudios pero supongo que a finales de mayo o principios de junio volveré a estar "activo", publicando entradas a diario, entre ellas la que me pides.

¡Saludos y siento la espera!

●ѕιℓνια fιℓóℓogα● dice...

¡¡Anda, qué chulo!! He puesto un librito rojo en mi blog jajajaja .... nada wapo, que tus trucos son estupendos. Yo también tengo mi página tuneada por tí.
Salu2 y que estés bien.

Jaime Trujillo Escobedo dice...

¡Maravilloso You, me and a cup of tea! Te ha quedado perfecto el lapicillo, al igual que el menú vertical.

¡Saludos!

Sonrisagr dice...

Hola Jaime, no consigo lograr que aparezca la imagen en el cursor.
He copiado y pegado el codigo y la URL de la imagen en su sitio y no sale nada, que crees que hago mal.
Gracias anticipadas.

Jaime Trujillo Escobedo dice...

Hola Sonrisa, envíame la dirección de la imagen para comprobar si es ésta la que no aparece o el script que no la muestra.

Sonrisagr dice...

Gracias Jaime por tu interés, he solucionado el problema con otro tipo de cursor de los que tu recomiendas también.
Me he llevado tu logo a mi blog para que otros te conozcan, espero no te importe.
Un saludo

Jaime Trujillo Escobedo dice...

¡Maravilloso entonces, Sonrisa! ¿Importarme? No sabes lo agradecido que te estoy. Es todo un placer ser nombrado en tu blog.

¡Un abrazo!

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo