- Login blog anda klik tata letak tambah gadget HTML/javascript masukkan code dibawah ini dan paste didalamnya.
<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE42VuSEIIx7jFayLKHJsEAwVtFTN2Wc-71eKFjTF0f-J6Mm9KaUxQETm0TzAsO5174muDyfiCH3RZEWaJ_Gl2VcMarbeaucERiYJ0R-wR9Q7VaE9v6I_5GSnP7zj0nH4J_hNNne2_wzM/s170/ojo_1.png) center center no-repeat; position: absolute; left: 307px; top: 20px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCK9Ba0lQvuu6vuA0dB3LlghKax-onpZQoq3MjCS3drh5STBAWCM0MYcujEdGPtjWGuVZm03qx_NPmnrswdMybavkViFsM0d8EHU5z64LswRUQxeuBHRoBSdx-nFmp8lWE0w1reUsxYCg/s30/pupila.png" width="23" height="23" /></div>
<div id="Ojo2" style="width: 170px; height: 140px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIppnVcO6j07ZIJhLK0w5zQP7yfUF4RR02zWZ9fLAdI1TT02DGUc1EqI47Ae3hhyphenhyphenncSkT2c3eNUGwp6p3_vUUC6Dqurzjr-D4P3xxgS3WMnh9e1YQUnBBwBxulw7AUcFTwQh9uEghT3CQ/s170/ojo_2.png) center center no-repeat; position:absolute;
left: 485px; top: 20px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCK9Ba0lQvuu6vuA0dB3LlghKax-onpZQoq3MjCS3drh5STBAWCM0MYcujEdGPtjWGuVZm03qx_NPmnrswdMybavkViFsM0d8EHU5z64LswRUQxeuBHRoBSdx-nFmp8lWE0w1reUsxYCg/s30/pupila.png" width="23" height="23" /></div>
</div>
<script type="text/javascript">
EYES.follow ('Ojo1');
EYES.follow ('Ojo2');
</script>
Jika anda ingin gambar yang lain
<div style="position:relative; height:145px; margin-bottom:30px;">
<div id="Ojo1" style="width: 132px; height: 143px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEga66P9KdxsMgRzZNV0xtNg2urQlrrJKqbo2G8KEiU2y3qo5pO-lMbEJTiv-VswhsiAq6Tbgtaapu1z6126uoUcGiiPjZ2j2Ug2AkoYsNzCuYmV96POA_niWgH2WPlMc13ndudSEdJ9nic/s143/ojo1.png) center center no-repeat; position:absolute; left: 377px; top: 20px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWsKpphFZ9he-AhWKW_5rgiPTfiI777tO0jjFbMbspgnky9mGfBkoJroAikiDxpaxQpEq3-0t4q9tru5QWdbasZYRgyiI8IFKJ61w9MIgCvmgbaVN3oGcSthM79hQ8ykqmlGhOosZyNOQ/s34/pupila.png" width="30" height="30" /></div>
<div id="Ojo2" style="width: 132px; height: 143px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYGmDtRJKyq5-AEWMD8NyEo1vGd5MMe-1MWuQ3GPsw6vm-nus6Jir-7CfmZyEUNGeV1EMDWzG-tdDZMslLdYboqER3GhcDB5br77Ll2nKj_ADrQ41umL0oYwcCPEyDVdH8Cbv6eioLOGA/s143/ojo2.png) center center no-repeat; position:absolute; left: 485px; top: 20px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWsKpphFZ9he-AhWKW_5rgiPTfiI777tO0jjFbMbspgnky9mGfBkoJroAikiDxpaxQpEq3-0t4q9tru5QWdbasZYRgyiI8IFKJ61w9MIgCvmgbaVN3oGcSthM79hQ8ykqmlGhOosZyNOQ/s34/pupila.png" width="30" height="30" /></div>
</div>
<div id="Ojo1" style="width: 132px; height: 143px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEga66P9KdxsMgRzZNV0xtNg2urQlrrJKqbo2G8KEiU2y3qo5pO-lMbEJTiv-VswhsiAq6Tbgtaapu1z6126uoUcGiiPjZ2j2Ug2AkoYsNzCuYmV96POA_niWgH2WPlMc13ndudSEdJ9nic/s143/ojo1.png) center center no-repeat; position:absolute; left: 377px; top: 20px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWsKpphFZ9he-AhWKW_5rgiPTfiI777tO0jjFbMbspgnky9mGfBkoJroAikiDxpaxQpEq3-0t4q9tru5QWdbasZYRgyiI8IFKJ61w9MIgCvmgbaVN3oGcSthM79hQ8ykqmlGhOosZyNOQ/s34/pupila.png" width="30" height="30" /></div>
<div id="Ojo2" style="width: 132px; height: 143px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYGmDtRJKyq5-AEWMD8NyEo1vGd5MMe-1MWuQ3GPsw6vm-nus6Jir-7CfmZyEUNGeV1EMDWzG-tdDZMslLdYboqER3GhcDB5br77Ll2nKj_ADrQ41umL0oYwcCPEyDVdH8Cbv6eioLOGA/s143/ojo2.png) center center no-repeat; position:absolute; left: 485px; top: 20px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWsKpphFZ9he-AhWKW_5rgiPTfiI777tO0jjFbMbspgnky9mGfBkoJroAikiDxpaxQpEq3-0t4q9tru5QWdbasZYRgyiI8IFKJ61w9MIgCvmgbaVN3oGcSthM79hQ8ykqmlGhOosZyNOQ/s34/pupila.png" width="30" height="30" /></div>
</div>
Dan Juga ini
<div style="position:relative; height:145px; margin-bottom:30px;">
<div id="Ojo1" style="width: 127px; height: 135px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBMePW9IaUWekQCMbzdV86_-G8JoLxi5TBIMHSi3FqfL0PQ2dTpco1SmFvlKwWTH5fvOUumgSKZt2DM0wj_rRQ4xNJhjCJMjbl-jRismv4Wy-hR0JMJ-41YiC7Jpdehz8sJxIOf18LBa4/s135/ojo1.png) center center no-repeat; position:absolute; left: 377px; top: 20px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgukK2A_yCOk6CZw388FMLggnBQxw5S8wfU4lTp2qhyphenhyphen20mbkGRBnV_DqhkQ8Gx4ljm8MInb_ymgtvtFL-Pld7BtsgyWIm1QP4z2rz9B-naxqGU4ex6Mp6L3D4DXzWpVhf4Rfa3LT6JLTWA/s34/pupila.png" width="30" height="30" /></div>
<div id="Ojo2" style="width: 127px; height: 135px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvTKr0a_UQSPXmr6XBKE_f03k7lFV7QrIiDTKp8sqeC9GcmWCXgcTG-UTZrp1RMekaFWRxd_x1PAGz00EVUU_HkFR0H035_k5899uEWxNPgaq1TOfXriZ2I50iTPd-afrUrPx64CxSkcY/s135/ojo2.png) center center no-repeat; position:absolute; left: 515px; top: 20px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgukK2A_yCOk6CZw388FMLggnBQxw5S8wfU4lTp2qhyphenhyphen20mbkGRBnV_DqhkQ8Gx4ljm8MInb_ymgtvtFL-Pld7BtsgyWIm1QP4z2rz9B-naxqGU4ex6Mp6L3D4DXzWpVhf4Rfa3LT6JLTWA/s34/pupila.png" width="30" height="30" /></div>
</div>
Semoga bermanfaat........
{ 0 komentar... Views All / Send Comment! }
Posting Komentar