Ojos que siguen al cursor

31 de octubre de 2011 60 comentarios ,
Una forma graciosa de mantener entretenidos a los lectores pequeños (y no tan pequeños) en nuestro blog, es con unos ojos que siguen al cursor por donde éste se mueva. El objetivo es meramente de entretenimiento para quitarle un poco de seriedad al blog y hacer que los lectores se diviertan.
Puedes ver el ejemplo aquí mismo, mueve el cursor por la página y los ojos te seguirán.






Colocar estos ojos que siguen al cursor no nos quitará mucho tiempo. Si usas la interfaz antigua entra en Diseño | Elementos de la página | Añadir gadget | HTML/Javascript. Y si usas la nueva interfaz entra en Diseño | Añadir gadget | HTML/Javascript. Ahí pega esto:
<script type='text/javascript'>
//<![CDATA[
// Ojos que siguen al cursor
// Script original de Oopstudios.com
// Adaptado por ciudadblogger.com

EYES = {};
EYES.stack = [];
//
EYES.follow = function (eye) {
var el1 = document.getElementById (eye);
var el2 = el1.getElementsByTagName ("IMG");
el2 = el2[0];
el2.centre = (el1.offsetWidth - el2.offsetWidth) / 2;
el2.style.margin = el2.centre + "px 0 0 " + el2.centre + "px";
el1.maxDist = 6 * el1.offsetWidth;
EYES.stack.push ([el1, el2]);
};
EYES.mousemove = function (e) {
if (!EYES.stack.length) {
return;
}
//
var mouseX = mouseY = 0;
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
mouseX = e.pageX;
mouseY = e.pageY;
} else if (e.clientX || e.clientY) {
mouseX = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
mouseY = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
//

for (var e=0, l=EYES.stack.length; e<l; e++) {
var el = EYES.stack[e];
var elX = elY = 0;
if (el[0].offsetParent) {
obj = el[0];
do {
elX += obj.offsetLeft;
elY += obj.offsetTop;
} while (obj = obj.offsetParent);
}
el[0].centreX = elX + Math.round (el[0].offsetWidth / 2);
el[0].centreY = elY + Math.round (el[0].offsetHeight / 2);
var difX = mouseX - el[0].centreX;
var difY = mouseY - el[0].centreY;
var dTan = Math.atan2 (difX, difY);
var dist = Math.sqrt ((difX * difX) + (difY * difY));
dist = Math.sin ((dist > el[0].maxDist ? 1 : dist / el[0].maxDist));
var newX = el[1].centre + Math.round (Math.sin (dTan) * el[1].centre * dist);
var newY = el[1].centre + Math.round (Math.cos (dTan) * el[1].centre * dist);
el[1].style.margin = newY + "px 0 0 " + newX + "px";
}
};

if (window.attachEvent) document.attachEvent ("onmousemove", EYES.mousemove);
else document.addEventListener ("mousemove", EYES.mousemove, false);
//]]>
</script>


<div style="position:relative; height:150px; margin-bottom:30px;">
<div id="Ojo1" style="width: 170px; height: 140px;
background: url(http://lh5.googleusercontent.com/-ZvPrMLTmDss/Tq9hi3hOiuI/AAAAAAAAB3k/ns0hdu4oLHY/s170/ojo_1.png) center center no-repeat; position: absolute; left: 307px; top: 20px;">
<img src="http://lh3.googleusercontent.com/-xGTUu-uw3eE/Tq9FzB8X7AI/AAAAAAAAB1Y/r45hH1IpQ5I/s30/pupila.png" width="23" height="23" /></div>
<div id="Ojo2" style="width: 170px; height: 140px; background: url(http://lh4.googleusercontent.com/-fdWmeVfdzG4/Tq9hizn5WWI/AAAAAAAAB3o/PSUQixCGsHk/s170/ojo_2.png) center center no-repeat; position:absolute;
left: 485px; top: 20px;">
<img src="http://lh3.googleusercontent.com/-xGTUu-uw3eE/Tq9FzB8X7AI/AAAAAAAAB1Y/r45hH1IpQ5I/s30/pupila.png" width="23" height="23" /></div>
</div>



<script type="text/javascript">
EYES.follow ('Ojo1');
EYES.follow ('Ojo2');
</script>
Guarda los cambios y listo. Los ojos se verán mucho mejor si los pones debajo de la cabecera, así que sólo basta arrastrrar el gadget debajo de la cabecera para que quede ahí.

Pero para que haya un poco de variedad he puesto a su disposición cuatro tipo de ojos diferentes, sólo tienes que eliminar la parte gris tenue y en su lugar poner uno de estos códigos.
<div style="position:relative; height:145px; margin-bottom:30px;">
<div id="Ojo1" style="width: 132px; height: 143px; background: url(http://lh6.googleusercontent.com/-G1SdIK4EQAM/Tq9KUlmQhWI/AAAAAAAAB1k/TYW2FbzqSU8/s143/ojo1.png) center center no-repeat; position:absolute; left: 377px; top: 20px;">
<img src="http://lh4.googleusercontent.com/-naCDuX03WpQ/Tq9KeZErQJI/AAAAAAAAB1w/meYDW9Y51M8/s34/pupila.png" width="30" height="30" /></div>
<div id="Ojo2" style="width: 132px; height: 143px; background: url(http://lh4.googleusercontent.com/-DMZBDYo4Rn0/Tq9KUhX2nPI/AAAAAAAAB1g/aVv1zZO9HQU/s143/ojo2.png) center center no-repeat; position:absolute; left: 485px; top: 20px;">
<img src="http://lh4.googleusercontent.com/-naCDuX03WpQ/Tq9KeZErQJI/AAAAAAAAB1w/meYDW9Y51M8/s34/pupila.png" width="30" height="30" /></div>
</div>

<div style="position:relative; height:145px; margin-bottom:30px;">
<div id="Ojo1" style="width: 127px; height: 135px; background: url(http://lh6.googleusercontent.com/-nIFSFb0FUBc/Tq9OQfidbcI/AAAAAAAAB2U/3UyDsSjWgYE/s135/ojo1.png) center center no-repeat; position:absolute; left: 377px; top: 20px;">
<img src="http://lh5.googleusercontent.com/-BHj2y7unB1U/Tq9Q4hgLbeI/AAAAAAAAB2g/cuTjMwabrzI/s34/pupila.png" width="30" height="30" /></div>
<div id="Ojo2" style="width: 127px; height: 135px; background: url(http://lh5.googleusercontent.com/-as6ykEORMr0/Tq9OQSfgksI/AAAAAAAAB2Q/FgZsKFiFfR0/s135/ojo2.png) center center no-repeat; position:absolute; left: 515px; top: 20px;">
<img src="http://lh5.googleusercontent.com/-BHj2y7unB1U/Tq9Q4hgLbeI/AAAAAAAAB2g/cuTjMwabrzI/s34/pupila.png" width="30" height="30" /></div>
</div>

<div style="position:relative; height:161px; margin-bottom:30px;">
<div id="Ojo1" style="width: 180px; height: 161px; background: url(http://lh6.googleusercontent.com/-Co_Tz9uS1og/Tq9Z_kcMmUI/AAAAAAAAB3I/XT_s4Dy0GAs/s180/ojo1.png) center center no-repeat; position:absolute; left: 307px; top: 20px;">
<img src="http://lh6.googleusercontent.com/-nfvJpUE1CgM/Tq9W6TP9hNI/AAAAAAAAB24/KNwO7NSGqnM/s71/pupila.png" width="65" height="65" /></div>
<div id="Ojo2" style="width: 180px; height: 161px; background: url(http://lh5.googleusercontent.com/-U0ZSRONSNGM/Tq9Z_l-nKjI/AAAAAAAAB3M/PruPm2mkezY/s180/ojo2.png) center center no-repeat; position:absolute; left: 545px; top: 20px;">
<img src="http://lh6.googleusercontent.com/-nfvJpUE1CgM/Tq9W6TP9hNI/AAAAAAAAB24/KNwO7NSGqnM/s71/pupila.png" width="65" height="65" /></div>
</div>



Si quisieras mover los ojos más a la izquierda o derecha entonces debes modificar las partes en color rojo, el primer valor es la distancia del primer ojo desde la izquierda, y el segundo valor es la distancia del segundo ojo también desde la izquierda. Por lo tanto, para separar o juntar más los ojos sólo debes modificar el segundo valor de left.

Ojalá que se diviertan tanto como seguro sus lectores lo harán :)


60 comentarios en:

" Ojos que siguen al cursor "

  1. xD estan buenos Potro:3 primero en comentar O:
    Potro vengo con una duda analize mi web en Pingdom Tools y mire que tengo baja puntuacion en las imagenes casheables algo asi, busque y encontre esto: http://www.todotutoriales.es/2010/12/01/como-especificar-la-expiracion-de-imagenes-en-cache/ pero es para WP hay algo para blogger?

    PD: es para aumentar velocidad de carga y posicionamento O:

    ResponderEliminar
  2. Hola hermano mira antes que nada me disculpo por escribir qu eno tenga q ver con el tema, lo que pasa es que, de la noche a la mañana ah bajado mi posecionamioento de google noce ah que se debe.Por ejemplo ante tenia 100 diarios ahor atengo 20 y esto es.

    Bueno mil gracias dios te bendiga y bendiciones.

    ResponderEliminar
  3. ¡¡que chulo!! Jaja excelente me ha encantado!

    ResponderEliminar
  4. Jajaja, en mi portatil hay unos muy parecidos que se ponen en la barra de herramientas. Me gusta el primero. Muy bien, Potro.

    ResponderEliminar
  5. ¡Que divertido, Potro!!
    Ya lo puse en mi blog.

    ResponderEliminar
  6. Esta muy bueno Potro para que los lectores se diviertan un poco.
    Siempre con algo nuevo potro.
    Saludos

    ResponderEliminar
  7. Omar-GeekOS, en Blogger no tenemos acceso al hosting para poder hacer esas modificaciones. Pero asignar un tiempo de expiración no es lo único que puede hacerse para optimizar imágenes, también puedes apoyarte reduciendo el tamaño de ellas, usar atributos alt y title, etc.

    ResponderEliminar
  8. leisy, el número de visitas siempre es variable, no hay certeza de que siempre nos mantengamos en la misma cifra.
    Cuando la razón no es porque Google nos ha penalizado entonces debes considerar varias cosas, como si tienes un sitemap enviado a Google, si tu feed está trabajando correctamente (para que el sitemap funcione), si has hecho una modificación a la plantilla que afecte los títulos de las entradas y del blog, si hiciste un cambio en la configuración del blog que indique que el blog no debe indexarse... en fin, son varios puntos a considerar.

    Bendiciones para ti también :)

    ResponderEliminar
  9. CampamentoWeb, qué bueno que así ha sido, a mí igual me ha gustado mucho :)

    ~David~★, el primero aunque tiene aspecto de ser el gruñón curiosamente es el más simpático :)

    ResponderEliminar
  10. Hola Potro, están geniales ;-) gracias por todo

    ResponderEliminar
  11. Hola Potro, muy bueno lo de lo ojos, aunque yo te quería preguntar como se puede eliminar la cabecera de un blog.

    Saludos

    ResponderEliminar
  12. potro me preguntaba se puede poner un seprarador en una publicacion por ejemplo que separe los botones para compartir

    ResponderEliminar
  13. Potro excelentre truco amigo genial mis respetos "Maestro del Bloggin".

    Te queria preguntar si puedes hacer unos nuevo botones para compartir que sean sencillos pero a la vez con algun efecto.

    SALUDOS

    ResponderEliminar
  14. Daniel, qué bueno que te ha gustado :)

    Jhonnysan, y de paso nosotros también nos distraemos un rato :D

    ResponderEliminar
  15. Muchas gracias, me voy a poner a jugar a ver que sale ya que el logo que representa a mi web es un Ojo =).

    Saludos.

    ResponderEliminar
  16. MaGoS RaDioMuSiC, gracias a ti por tu visita!

    Adrian Baños, depende de la plantilla, no es el mismo procedimiento para una del Diseñador, una antigua o una personalizada.

    ResponderEliminar
  17. sonacero360, mira este enlace, ahí verás cómo poner separadores en las entradas.

    Juvinao, ahora no creo pero más adelante veremos qué podemos hacer con los botones ;)

    ResponderEliminar
  18. Adrián J. Messina, siendo así entonces este truquillo te vendrá como anillo al dedo.

    BGeek, saludos!

    ResponderEliminar
  19. Hola Potro. Está excelente este post. Quisiera saber si se puede hacer con un personaje que yo mismo haya creado. O si puedo tomar una fotografía por ejemplo La Mona Lisa y hacer ese mismo efecto. Muchas gracias.

    ResponderEliminar
  20. Genial...super buena idea jajajaj gracias por tu ayuda...

    ResponderEliminar
  21. Walter Conejo Carballo, ahí se necesitan unos pasos extra pues se tiene que añadir además de los ojos y las púpílas una imagen de fondo. Después haré una entrada sobre ello.

    Marcia Vera, gracias a ti por tu visita!

    ResponderEliminar
  22. gracias! potro es normal que tambien parpadeen? esque esos ojos que pusiste me parpadearon! =S

    ResponderEliminar
  23. potro acabo de ver los finalistas de bitacoras y... ¡MI BLOG ESTA ENTRE LOS FINALISTAS! Jeje que alegria... dudo mucho ganar pero con razon, porque solo llevo apenas medio año con mi nuevo blog. bueno, la pregunta es que si bitacoras es solo a nivel español o a nivel mundial o europeo... (para saber si mi blog esta entre los mejores de españa, europa o de lo que sea que hayan sido votados xD) ¿el concurso es internacional de españa o como?

    ResponderEliminar
  24. jajaja, que divertido Potro, la primera imagen me parece muy subliminal, viéndolo a fondo me recuerda ese vestido entallado que a veces nos ponemos las chicas, o ¿alucino?

    ;) Salu2!

    ResponderEliminar
  25. potro como le puedo poner un icono en los títulos de los gadgests, como en las plantillas personalizadas

    ResponderEliminar
  26. nEjO, sólo es normal en Halloween y Día de Muertos, cualquier otro día no debe parpadear :P

    CampamentoWeb, caray pues enhorabuena! Bitacoras.com es sólo para hispanihablantes, no hay ediciones en otros idiomas. Saludos y felicidades :)

    ResponderEliminar
  27. Karla, jajajajajajajajajajaja, leí el comentario, me quedé pensando, vuelvo a leer el comentario, sigo pensando, miro la imagen de los primeros ojos... ¡y ahí estaba! ¡tal cual como lo describes! jajajajajajajajajaja

    Pero no, no era con intención subliminal, aunque después de haberme metido esa idea ya no veré a esos ojos de la misma forma :P

    ResponderEliminar
  28. sonacero360, en esta entrada está la información que buscas:
    http://ciudadblogger.com/2009/08/poner-imagen-en-los-titulos-de-los.html

    Saludos.

    ResponderEliminar
  29. Jaja, esto esta muy bueno. Si que te mantienen ocupado por un par de minutos jaja.

    ResponderEliminar
  30. Ya sé, creo que bajan nuestra productividad :P

    ResponderEliminar
  31. ¡Ya está! ¡Añadidos! Quedan muy bien X3

    ResponderEliminar
  32. HOla a tod@s!! A ver, tengo un blog para personas con discapacidad. Me ha servido muchísimo el truco que poneis para ampliar el texto, ya que una de las personas con las que trabajo tiene una deficiencia visual. Ahora quiero hacer otra cosa, pero no se cómo. He visto que se puede cambiar el cursor de mil formas, pero no encuentro ninguna que haga que el cursor aumente cuando pasamos por un enlace, ¿sabeis si hay alguna manera de hacerlo? Y ya que estamos... el blog tiene un foro hecho con nabble, pero está en inglés. El resto del grupo con el que trabajo tiene discapacidad intelectual, y de inglés andamos cortitos... ¿sabeis si hay alguna manera de traducirlo a español? Se que hay una opcion que te permite crear uno nuevo en español, pero no sé si la hay de traducirlo, ya que no quiero perder lo que ya estaba publicado. Si os ayuda verlo es autogestoresaturem.blogspot.com. GRACIAS

    ResponderEliminar
  33. Hola Autogestores de Aturem,

    Lo del idioma ya te lo he respondido en la otra entrada.
    Lo del cursor, no conozco alguno que haga eso, al menos hasta donde yo sé no se puede, pero lo que sí puedes hacer es cambiar el cursor de tu blog por uno que sea de un tamaño más grande:
    http://ciudadblogger.com/2009/06/cambia-el-cursor-de-tu-blog.html

    Saludos!

    ResponderEliminar
  34. Gracias El Potro! lo haremos. Respecto a lo del otra entrada... no recuerdo dónde puse el comentario, jajajaj!!! soy un desastre, tu recuerdas dónde estaba? Gracias otra vez. Un saludo!

    ResponderEliminar
  35. Una forma práctica es hacer click en el enlace que está aquí abajo que dice "Suscripción por correo electrónico", de esa forma cuando alguien responda donde dejaste la pregunta, te llegará un correo y así no te perderás de la respuesta :)
    Aquí está la entrada en cuestión:
    http://ciudadblogger.com/2011/07/google-y-los-dominios-cocc-desindexados.html

    Buen día!

    ResponderEliminar
  36. Gracias por todo... se nota que soy nueva eh!!

    ResponderEliminar
  37. Buen aporte, ya se como editar las imagenes.

    ResponderEliminar
  38. Me encanta el cursor primero >////<
    Por cierto, tengo un problema con un cursor que puse en mi blog de una pagina web llamada totallyfreecursos.com. Lo quité porque ya no me gustaba, pero ahora aparece una imagen que pone: "Totallyfreecursors" "Free virus" "Free spyware" abajo del blog, y por mucho que lo intento quitar a través de la Edición de HTML, sigue estando. Me podéis ayudar por favor! Aquí os dejo el blog: http://onitakumartos.blogspot.com

    ResponderEliminar
  39. Busca este código y elimínalo, ese es el que hace que aparezca:
    <div align='center' style='z-index:9;visibility:visible;'><a class='tfc' href='http://www.totallyfreecursors.com/' target='_blank'><img alt='Free Kirara Cursors at www.totallyfreecursors.com' border='0' height='31' src='http://downloads.totallyfreecursors.com/public/CursorsLogo88-31.gif' width='88'/></a></div>

    ResponderEliminar
  40. Hola Potro espero que estes muy bien, tengo una duda, yo elimine la navbar, pero en su lugar me quedo un espacio, ¿como hago para reducir ese espacio y de ese modo subir un poco mas la cabecera?...gracias y un saludo

    ResponderEliminar
    Respuestas
    1. Si usas una plantilla del Diseñador entonces mira esta entrada:
      http://ciudadblogger.com/2011/02/eliminar-espacio-superior-en-las.html

      Eliminar
  41. Hola Potro, excelente trabajo como siempre.
    A mi me surge una duda. Yo uso el mismo script en una web, lo que sucede es lo siguiente:

    Coloco los ojos dentro de una div con posicion "fixed" y en la parte superior de la web para que los ojos siempre esten ahi.
    El problema es que cuando muevo la pagina hacia abajo y muevo el mouse, pues los ojos lo siguen pero como si estos siguieran arriba y no se ve bien.
    Aqui la web en cuestion http://avraqp.zxq.net/test.html

    En java estoy un tanto perdido, tal vez puedas ayudarme, me supongo que habria que estar obteniendo la ubicacion de las pupilas en cada momento, pero la verda no se por donde comenzar.

    Espero puedas ayudarme. Gracias por adelantado.

    ResponderEliminar
    Respuestas
    1. Hola AVR Arequipa, entré pero lo veo bastante bien, las pupilas siguen al cursor de forma normal, al menos con Chrome lo veo todo bien.

      Eliminar
    2. Gracias por la pronta respuesta.

      A lo que me referia es que se ve de una manera si mueves el mouse alrededor de la cabeza del personaje cuando te encuentras en la parte superior de la pagina, y se ve distinto si haces lo mismo pero estando hasta abajo de la pagina.

      Si no hay mucho que se pueda hacer, creo que dejaré la div con posición "absolute" nomas.

      Eliminar
  42. Gracias por la pronta respuesta.

    A lo que me referia es que se ve de una manera si mueves el mouse alrededor de la cabeza del personaje cuando te encuentras en la parte superior de la pagina, y se ve distinto si haces lo mismo pero estando hasta abajo de la pagina.

    Si no hay mucho que se pueda hacer, creo que dejaré la div con posición "absolute" nomas.

    ResponderEliminar
    Respuestas
    1. Puede ser por la posición, aun con estos como está a veces no se ve como debería.

      Eliminar
  43. No se puede hacer como para un intro, es que se me vino una idea de que en ese margen donde se encuentran los ojos esten flechas de diferentes estilos que apuntan al cursor, lo siguen y asi :D?

    ResponderEliminar
    Respuestas
    1. No creo, sería cuestión de que lo intentes con el intro que he publicado, pero lo dudo mucho.

      Eliminar
  44. y si quisiera hacerlo con una imagen propia??

    ResponderEliminar
  45. y si quisiera hacerlo con una imagen propia??

    ResponderEliminar
    Respuestas
    1. Es complicado porque tienes que alinear las imágenes, en el código verás unas URLs esas son las imágenes, si quieres cámbialas.

      Eliminar
  46. Hola como estas? Quisiera saber por que no me salio, tengo blogger, es compatible tambien ?

    ResponderEliminar
    Respuestas
    1. Todo lo que hay aquí es para Blogger, así que sí es compatible :)

      Eliminar

Los comentarios están siendo moderados y serán publicados una vez que hayan sido revisados por un administrador.
Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

 
Ir Arriba Ir Abajo
I Ciudad Blogger