LOGO

JavaScript implementation of the classic Xeyes program

If you like this animated image, and want to include it in your web page, follow these steps:
  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, and with some very ancient ones too: 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 src="jseyes.js">
</script>

3. Create an instance with default values

Insert the following lines into your page (preferably into the header, but it works anywhere):

<script>
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>
myeyes.main= { img:"jseyes.gif",
	w:150, h:150 };
myeyes.link= "https://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>
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>
myeyes.deltat= 40;
</script>


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


<script>
myeyes.follow= 100;
</script>


	
5. Start the program

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


<script>
myeyes.write();
</script>


	
More examples