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.
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.
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 :)
