Animation: three eyes
/*
Although you can paste
<script type="text/javascript" src="staticeyes.js"></script>
as many times as you like in the same page, you'll need to
alter them if you want each one to use a different style.
Example: you want 3 sets of eyes on your page but need
different styles for each !
Right click on the "staticeyes.js" icon and choose edit,
Notepad or whatever will open showing the script.
Look for this line, near the top:
d.write('<div id="cont'+idx+'" class="eyestyle" style.......
You need to alter just class="eyestyle" to something
like class="eyestyle1"
Now click on "File" then "Save As". In the "file name" box
you will see: "staticeyes.js"
CHANGE THIS TO: "staticeyes1.js"
and click save. The original "staticeyes.js" remains unchanged!
---------------------------------------------------------------
Back to your web page, you can now add the style for "staticeyes1.js"
Example:
<style type="text/css">
<!--
style for original "staticeyes.js"....if needed....
The new style for "staticeyes1.js"
.eyestyle1{
padding-left : 0px;
padding-top : 10px;
padding-right : 10px;
padding-bottom : 0px;
float : left;
}
etc.........
//-->
</style>
To write the new eyes just add
<script type="text/javascript" src="staticeyes1.js"></script>
to where ever you want them to appear in your page.
Done! If you get stuck, study the example web page HTML/source.
*/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Static Eyes</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<link rel="stylesheet" href="whitestyle.css" type="text/css">
<script type="text/javascript" src="whitestyle.js"></script>
<style type="text/css">
<!--
.tablestyle{
width : 370px;
text-align : center;
margin-left : auto;
margin-right : auto;
font-family : verdana, arial, sans-serif;
font-size : 11px;
color : #888888;
border : dotted 1px #888888;
}
.eyestyle{
/*Optional*/
text-align : center;
margin-left : auto;
margin-right : auto;
}
.eyestyle1{
/*Optional*/
padding-left : 0px;
padding-top : 10px;
padding-right : 10px;
padding-bottom : 0px;
float : left;
}
.eyestyle2{
/*Optional*/
padding-left : 0px;
padding-top : 10px;
padding-right : 0px;
padding-bottom : 0px;
float : right;
}
//-->
</style>
</head>
<body>
<p>
<script type="text/javascript">
//Static Eyes - http://www.btinternet.com/~kurt.grigg/javascript
if ((document.getElementById) &&
window.addEventListener || window.attachEvent){
(function(){
var e_img = new Image();
e_img.src = "eye.gif";
var p_img = new Image();
p_img.src = "pupils.gif";
var d = document;
var pix = "px";
var idx = document.images.length;
if (document.getElementById("cont"+idx)) idx++;
var eyeballs = "";
var pupil1 = "";
var pupil2 = "";
d.write('<div id="cont'+idx+'" class="eyestyle" style="height:34px;width:69px">'
+'<div id="eyblls'+idx+'" style="position:relative;width:69px;height:34px"><img src="'+e_img.src+'" alt=""/>'
+'<img id="ppl1'+idx+'" src="'+p_img.src+'" alt="" style="position:absolute;top:10px;left:11px;width:13px;height:13px"/>'
+'<img id="ppl2'+idx+'" src="'+p_img.src+'" alt="" style="position:absolute;top:10px;left:46px;width:13px;height:13px"/>'
+'<\/div><\/div>');
function watchTheMouse(y,x){
var osy = eyeballs.offsetTop;
var osx = eyeballs.offsetLeft;
var c1y = osy + 17;
var c1x = osx + 17;
var c2y = osy + 17;
var c2x = osx + 52;
var dy1 = y - c1y;
var dx1 = x - c1x;
var d1 = Math.sqrt(dy1*dy1 + dx1*dx1);
var dy2 = y - c2y;
var dx2 = x - c2x;
var d2 = Math.sqrt(dy2*dy2 + dx2*dx2);
var ay1 = y - c1y;
var ax1 = x - c1x;
var angle1 = Math.atan2(ay1,ax1)*180/Math.PI;
var ay2 = y - c2y;
var ax2 = x - 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;
pupil1.top = c1y-6+onEyeBall1 * Math.sin(angle1*Math.PI/180)-osy+pix;
pupil1.left = c1x-6+onEyeBall1 * Math.cos(angle1*Math.PI/180)-osx+pix;
pupil2.top = c2y-6+onEyeBall2 * Math.sin(angle2*Math.PI/180)-osy+pix;
pupil2.left = c2x-6+onEyeBall2 *Math.cos(angle2*Math.PI/180)-osx+pix;
}
function mouse(e){
var y,x;
if (!e) e = window.event;
if (typeof e.pageY == 'number'){
y = e.pageY;
x = e.pageX;
}
else{
var ref = document.documentElement||document.body;
y = e.clientY + ref.scrollTop;
x = e.clientX + ref.scrollLeft;
}
watchTheMouse(y,x);
}
function init(){
eyeballs = d.getElementById("eyblls"+idx);
pupil1 = d.getElementById("ppl1"+idx).style;
pupil2 = d.getElementById("ppl2"+idx).style;
}
if (window.addEventListener){
window.addEventListener("load",init,false);
document.addEventListener("mousemove",mouse,false);
}
else if (window.attachEvent){
window.attachEvent("onload",function(){init();});
document.attachEvent("onmousemove",function(){mouse(window.event);});
}
})();
}//End.
</script>
</p>
<table class="tablestyle">
<tr>
<td style="text-align:center;font-weight:bold;color:red">
Important!<br/>Will not work correctly if placed inside any div!
</td>
</tr>
<tr>
<td style="text-align:left">
<p style="text-align:center">Works OK in the normal HTML flow, tables, and <p>'s etc.</p>
some text some text some text some text some text
some text some text some text some text some text
some text some text some text some text some text
some text some text some text some text some text
some text some text some text some text some text
some text some text some text some text some text
<script type="text/javascript">
//Static Eyes - http://www.btinternet.com/~kurt.grigg/javascript
if ((document.getElementById) &&
window.addEventListener || window.attachEvent){
(function(){
var e_img = new Image();
e_img.src = "eye.gif";
var p_img = new Image();
p_img.src = "pupils.gif";
var d = document;
var pix = "px";
var idx = document.images.length;
if (document.getElementById("cont"+idx)) idx++;
var eyeballs = "";
var pupil1 = "";
var pupil2 = "";
d.write('<div id="cont'+idx+'" class="eyestyle1" style="height:34px;width:69px">'
+'<div id="eyblls'+idx+'" style="position:relative;width:69px;height:34px"><img src="'+e_img.src+'" alt=""/>'
+'<img id="ppl1'+idx+'" src="'+p_img.src+'" alt="" style="position:absolute;top:10px;left:11px;width:13px;height:13px"/>'
+'<img id="ppl2'+idx+'" src="'+p_img.src+'" alt="" style="position:absolute;top:10px;left:46px;width:13px;height:13px"/>'
+'<\/div><\/div>');
function watchTheMouse(y,x){
var osy = eyeballs.offsetTop;
var osx = eyeballs.offsetLeft;
var c1y = osy + 17;
var c1x = osx + 17;
var c2y = osy + 17;
var c2x = osx + 52;
var dy1 = y - c1y;
var dx1 = x - c1x;
var d1 = Math.sqrt(dy1*dy1 + dx1*dx1);
var dy2 = y - c2y;
var dx2 = x - c2x;
var d2 = Math.sqrt(dy2*dy2 + dx2*dx2);
var ay1 = y - c1y;
var ax1 = x - c1x;
var angle1 = Math.atan2(ay1,ax1)*180/Math.PI;
var ay2 = y - c2y;
var ax2 = x - 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;
pupil1.top = c1y-6+onEyeBall1 * Math.sin(angle1*Math.PI/180)-osy+pix;
pupil1.left = c1x-6+onEyeBall1 * Math.cos(angle1*Math.PI/180)-osx+pix;
pupil2.top = c2y-6+onEyeBall2 * Math.sin(angle2*Math.PI/180)-osy+pix;
pupil2.left = c2x-6+onEyeBall2 *Math.cos(angle2*Math.PI/180)-osx+pix;
}
function mouse(e){
var y,x;
if (!e) e = window.event;
if (typeof e.pageY == 'number'){
y = e.pageY;
x = e.pageX;
}
else{
var ref = document.documentElement||document.body;
y = e.clientY + ref.scrollTop;
x = e.clientX + ref.scrollLeft;
}
watchTheMouse(y,x);
}
function init(){
eyeballs = d.getElementById("eyblls"+idx);
pupil1 = d.getElementById("ppl1"+idx).style;
pupil2 = d.getElementById("ppl2"+idx).style;
}
if (window.addEventListener){
window.addEventListener("load",init,false);
document.addEventListener("mousemove",mouse,false);
}
else if (window.attachEvent){
window.attachEvent("onload",function(){init();});
document.attachEvent("onmousemove",function(){mouse(window.event);});
}
})();
}//End.
</script>
some text some text some text some text some text
some text some text some text some text some text
some text some text some text some text some text
some text some text some text some text some text
some text some text some text some text some text
some text some text some text some text some text
some text some text some text some text some text
some text some text some text some text some text
some text some text some text some text some text
some text some text some text some text some text
some text some text some text some text some text
some text some text some text some text some text
some text some text some text some text some text
some text some text some text some text some text
some text some text some text some text some text
some text some text some text some text some text
some text some text some text some text some text
some text some text some text some text some text
some text some text some text some text some text
some text some text some text some text some text
some text some text some text some text some text
some text some text some text some text some text
some text some text some text some text some text
some text some text some text some text some text
<script type="text/javascript">
//Static Eyes - http://www.btinternet.com/~kurt.grigg/javascript
if ((document.getElementById) &&
window.addEventListener || window.attachEvent){
(function(){
var e_img = new Image();
e_img.src = "eye.gif";
var p_img = new Image();
p_img.src = "pupils.gif";
var d = document;
var pix = "px";
var idx = document.images.length;
if (document.getElementById("cont"+idx)) idx++;
var eyeballs = "";
var pupil1 = "";
var pupil2 = "";
d.write('<div id="cont'+idx+'" class="eyestyle2" style="height:34px;width:69px">'
+'<div id="eyblls'+idx+'" style="position:relative;width:69px;height:34px"><img src="'+e_img.src+'" alt=""/>'
+'<img id="ppl1'+idx+'" src="'+p_img.src+'" alt="" style="position:absolute;top:10px;left:11px;width:13px;height:13px"/>'
+'<img id="ppl2'+idx+'" src="'+p_img.src+'" alt="" style="position:absolute;top:10px;left:46px;width:13px;height:13px"/>'
+'<\/div><\/div>');
function watchTheMouse(y,x){
var osy = eyeballs.offsetTop;
var osx = eyeballs.offsetLeft;
var c1y = osy + 17;
var c1x = osx + 17;
var c2y = osy + 17;
var c2x = osx + 52;
var dy1 = y - c1y;
var dx1 = x - c1x;
var d1 = Math.sqrt(dy1*dy1 + dx1*dx1);
var dy2 = y - c2y;
var dx2 = x - c2x;
var d2 = Math.sqrt(dy2*dy2 + dx2*dx2);
var ay1 = y - c1y;
var ax1 = x - c1x;
var angle1 = Math.atan2(ay1,ax1)*180/Math.PI;
var ay2 = y - c2y;
var ax2 = x - 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;
pupil1.top = c1y-6+onEyeBall1 * Math.sin(angle1*Math.PI/180)-osy+pix;
pupil1.left = c1x-6+onEyeBall1 * Math.cos(angle1*Math.PI/180)-osx+pix;
pupil2.top = c2y-6+onEyeBall2 * Math.sin(angle2*Math.PI/180)-osy+pix;
pupil2.left = c2x-6+onEyeBall2 *Math.cos(angle2*Math.PI/180)-osx+pix;
}
function mouse(e){
var y,x;
if (!e) e = window.event;
if (typeof e.pageY == 'number'){
y = e.pageY;
x = e.pageX;
}
else{
var ref = document.documentElement||document.body;
y = e.clientY + ref.scrollTop;
x = e.clientX + ref.scrollLeft;
}
watchTheMouse(y,x);
}
function init(){
eyeballs = d.getElementById("eyblls"+idx);
pupil1 = d.getElementById("ppl1"+idx).style;
pupil2 = d.getElementById("ppl2"+idx).style;
}
if (window.addEventListener){
window.addEventListener("load",init,false);
document.addEventListener("mousemove",mouse,false);
}
else if (window.attachEvent){
window.attachEvent("onload",function(){init();});
document.attachEvent("onmousemove",function(){mouse(window.event);});
}
})();
}//End.
</script>
some text some text some text some text some text
some text some text some text some text some text
some text some text some text some text some text
some text some text some text some text some text
some text some text some text some text some text
some text some text some text some text some text
some text some text some text some text some text
some text some text some text some text some text
some text some text some text some text some text
some text some text some text
</td>
</tr>
</table>
</body>
</html>
AnimationMoreEyes.zip( 5 k)Related examples in the same category