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.

Ojos que persiguen y observan al cursor de tu blog

En esta entrada quiero mostrarte una derivación del truco 'Imagen que sigue al cursor' pero esta vez, con animación.

Se trata de incluir en el blog dos ojitos que persiguen al cursor y que su pupila parece estar observando en todo momento los movimientos que realizas con el ratón.

widget gadget, trucos blogger, ayuda para tu blog


Puedes comprobar el resultado accediendo a este blog de pruebas.


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



Pega este código:

<script type="text/javascript">
if ((document.getElementById) &&
window.addEventListener || window.attachEvent){
(function(){
var balcnimg1 = new Image();
balcnimg1.src = "http://3.bp.blogspot.com/_gjBqKNTws4M/THVXOYfebxI/AAAAAAAAEkg/Wn3IEGjqRtQ/s320/blojo2.gif";
var balcnimg2 = new Image();
balcnimg2.src = "http://1.bp.blogspot.com/_gjBqKNTws4M/THVXN5gidfI/AAAAAAAAEkY/kcnIlcd2L1E/s320/blojo1.gif";
var balcnimg3 = document.images.length;
if ( document.getElementById("pic"+balcnimg3) ||
document.getElementById("balcnad"+balcnimg3) ||
document.getElementById("balcnad2"+balcnimg3)) balcnimg3++;

document.write('<img id="blcnvv'+balcnimg3+'" src="'+balcnimg1.src+'" alt="" style="position:absolute;top:0px;left:0px;width:69px;height:34px"/>'
+'<img id="balcnad'+balcnimg3+'" src="'+balcnimg2.src+'" alt="" style="position:absolute;top:10px;left:11px;width:13px;height:13px"/>'
+'<img id="balcnad2'+balcnimg3+'" src="'+balcnimg2.src+'" alt="" style="position:absolute;top:10px;left:46px;width:13px;height:13px"/>');

document.write('<a style="font-size:12px;"href="http://goo.gl/p0SVq" target="_blank"><img src="http://goo.gl/5ZST"/></a>');
var h,w,r,balcneedimg,blcnimgmin,blcnimgmin2;
var d = document;
var my = 0;
var mx = 0;
var fy = 0;
var fx = 0;
var pix = "px";
var domWw = (typeof window.innerWidth == "33");
var domSy = (typeof window.pageYOffset == "33");
if (domWw) r = window;
else{
if (d.documentElement &&
typeof d.documentElement.clientWidth == "33" &&
d.documentElement.clientWidth != 0)
r = d.documentElement;
else{
if (d.body &&
typeof d.body.clientWidth == "number")
r = d.body;
}
}
function blcnff(){
var oh,sy,ow,sx,rh,rw;
if (domWw){
if (d.documentElement && d.defaultView &&
typeof d.defaultView.scrollMaxY == "number"){
oh = d.documentElement.offsetHeight;
sy = d.defaultView.scrollMaxY;
ow = d.documentElement.offsetWidth;
sx = d.defaultView.scrollMaxX;
rh = oh-sy;
rw = ow-sx;
}
else{
rh = r.innerHeight;
rw = r.innerWidth;
}
h = rh;
w = rw;
}
else{
h = r.clientHeight;
w = r.clientWidth;
}
}
function scrl(yx){
var y,x;
if (domSy){
y = r.pageYOffset;
x = r.pageXOffset;
}
else{
y = r.scrollTop;
x = r.scrollLeft;
}
return (yx == 0)?y:x;
}
function mouse(e){
var msy = (domSy)?window.pageYOffset:0;
if (!e) e = window.event;
if (typeof e.pageY == 'number'){
my = e.pageY - msy;
mx = e.pageX;}
else{
my = e.clientY - msy;
mx = e.clientX;
}
}
function blcnsgg(){
var sy = scrl(0);
var sx = scrl(1);
var chy = Math.floor(fy-50);
if (chy <= 0) chy = 0;
if (chy >= h-50) chy = h-50;
var chx=Math.floor(fx-34);
if (chx <= 0) chx = 0;
if (chx >= w-69) chx = w-69;
var c1y = chy+17;
var c1x = chx+17;
var c2y = chy+17;
var c2x = chx+52;
var dy1 = my - c1y;
var dx1 = mx - c1x;//80
var d1 = Math.sqrt(dy1*dy1 + dx1*dx1);
var dy2 = my - c2y;
var dx2 = mx - c2x;
var d2 = Math.sqrt(dy2*dy2 + dx2*dx2);
var ay1 = my - c1y;
var ax1 = mx - c1x;
var angle1 = Math.atan2(ay1,ax1)*180/Math.PI;
var ay2 = my - c2y;
var ax2 = mx - c2x;
var angle2 = Math.atan2(ay2,ax2)*180/Math.PI;
var dv = 1.7;
var onEyeBall1 = (d1 < 17)?d1/dv:10;
var onEyeBall2 = (d2 < 17)?d2/dv:10;
balcneedimg.top = chy+sy+pix;
balcneedimg.left = chx+sx+pix;
blcnimgmin.top = c1y-6+onEyeBall1*Math.sin(angle1*Math.PI/180)+sy+pix;
blcnimgmin.left = c1x-6+onEyeBall1*Math.cos(angle1*Math.PI/180)+sx+pix;
blcnimgmin2.top = c2y-6+onEyeBall2*Math.sin(angle2*Math.PI/180)+sy+pix;
blcnimgmin2.left = c2x-6+onEyeBall2*Math.cos(angle2*Math.PI/180)+sx+pix;
}
function balcnimg4(){
dy = fy += (my-fy) * 0.05;
dx = fx += (mx-fx) * 0.05;
blcnsgg();
setTimeout(balcnimg4,30);
}

function blcndde(){
balcneedimg = document.getElementById("blcnvv"+balcnimg3).style;
blcnimgmin = document.getElementById("balcnad"+balcnimg3).style;
blcnimgmin2 = document.getElementById("balcnad2"+balcnimg3).style;
blcnff();
balcnimg4();
}
if (window.addEventListener){
window.addEventListener("resize",blcnff,false);
window.addEventListener("load",blcndde,false);
document.addEventListener("mousemove",mouse,false);
}
else if (window.attachEvent){
window.attachEvent("onresize",blcnff);
window.attachEvent("onload",blcndde);
document.attachEvent("balcnkk",mouse);
}
})();
}
</script>

Guarda el gadget y habrás terminado.

Garago dice...

Ya esta, ya los tengo en mi blog. Queda muy animado gracias.

Jaime Trujillo Escobedo dice...

Me alegra mucho que te gusten, Garago. ¿Hacen que uno se sienta acompañado, verdad?

RembranDT dice...

Hola, Jaime, de nuevo paseandome en tu blog.

Sabes, realmente apreciaría que me dieras tu sincera opinión acerca de mi primer blog, ¿tiene demasiados scripts y eso dificulta la navegación?, ¿qué tan mal está el blog?, ¿qué le falta? y, ¿qué me sugieres a cerca de todo? XD

Lo que pasa es que lo mantengo porque un compañero es autor también de ese blog, pero la verdad es que ya no me gusta tanto el blog y lo quiero eliminar o traspasar. Gracias de nuevo :)

Jaime Trujillo Escobedo dice...

Hola RembranDT. Dado que comentas acerca de tu primer blog, supongo que te refieres al espacio "El Cementerio Olvidado...".

Ahora bien, desde mi punto de vista, el blog está un tanto sobrecargado. Pero no me refiero a que tengas demasiados scripts sino a que los gadgets son abundantes y sus correspondientes títulos están escritos con imágenes.

Esto hace que el blog tarde mucho más en cargar. Prueba a añadir títulos con texto a cada sección e intenta reducir el número de logotipos. Por lo demás, no cambiaría nada en particular, a excepción del cursor: los ojos quedan muy bien en tu blog de fondo oscuro pero la brujita también. Deberías escoger uno ya que ambos podrían 'marear' al lector.

Espero que mis consejos te ayuden. ¡Abrazos!

RembranDT dice...

Bueno, pues gracias, Jaime.

Tomaré muy encuenta tus opiniones.

¡Saludos!

Jaime Trujillo Escobedo dice...

Gracias a ti, RembranDT y suerte con el blog.

Jose dice...

Hola Jaime: no me funciona este truco :(

Jaime Trujillo Escobedo dice...

Jose, necesitaré la dirección del blog en el que vas a instalarlo pues su funcionamiento podría variar dependiendo de la plantilla utilizada.

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