JavaScript implementation of the classic Xeyes program

If you like this animated image and want to include it in your web page do this:
  1. Download the files
  2. Include 'jseyes.js' in your page
  3. Create an instance with default values
  4. Define parameters or accept the defaults
  5. Call the write method to insert the image where you want to see it
This script works with all modern browsers: Internet Explorer 9+, Firefox 4+, Opera, Safari, Chrome.

1. Download the files

You can download the files in zip format.

2. Include jseyes.js in your page

Insert the following line into your page:

<script type="text/javascript" src="jseyes.js"></script>

3. Create an instance with default values

Insert the following lines into your page:

<script type="text/javascript">
	var myeyes= new jseyes();
</script>

You can have more than one jseyes image on your page, differently named with different parameters and position.

4. Define parameters

You can accept the defaults or assign new values to these variables:

The main image (img), size (w, h), and onclick link (link).

<script type="text/javascript">
	myeyes.main= { img:"jseyes.gif", w:150, h:150 };
	myeyes.link= "http://www.pintergabor.eu";
</script>


The eyes image (img), size (w, h), position (x, y), radius (xr, yr).  Other images in the zip file: jseyegreen.gif, jseyebrown.gif, jseyegrey.gif, jseyeblack.gif, jseyerainbow.gif.

<script type="text/javascript">
	myeyes.eye1= { img:"jseyeblue.gif", w:21, h:29, x:46,  y:58, xr:7, yr:17 };
	myeyes.eye2= { img:"jseyeblue.gif", w:21, h:29, x:46,  y:58, xr:7, yr:17 };
</script>

Update rate in ms. Normally you do not have to modify it.

<script type="text/javascript">
	myeyes.deltat= 40;
</script>

Mouse trailing speed in percents (1..199). 180%=crazy, 100%=fast, 50%=nice, 10%=slow, 5%=sleepy.

<script type="text/javascript">
	myeyes.follow= 100;
</script>

5. Start the program

Call the write() method where you want to see the image.

<script type="text/javascript">
	myeyes.write();
</script>

More examples