View Full Version : This is a very cool script, But I can't figure it out

11-12-2010, 04:14 PM
Please see the "watching eyes" next to the search box at the top of: http://www.burton.com

I am looking to recreate a similar effect for a project, and I cannot figure out what script is running this. I can see there is some CSS and JS associated with this file but I cannot seem to figure out how it works. It seems to be done using x,y coordinates.

Any help would be greatly appreciated.

Thank you in advance,

11-12-2010, 04:32 PM
Did you try using Google?



If you want to actually learn how it is done..


11-12-2010, 04:34 PM
rofl that's extremely easy to do.

11-12-2010, 04:57 PM
Thanks for your responses.
At a quick glimpse it does look like the code from dynamic drive. but if you look at the source code from burton.com more closely it is not quite the same. Te final result is much different. The eyes are a rollover image that interacts with the mouse position on the burton website. The example referenced on dynamic drive was done differently.

For example, put your mouse in between the two eyes on the burton example, they are not coss-eyed. I think this is a different script.

Please correct me if I am wrong.


Old Pedant
11-12-2010, 08:10 PM
Yes? So? I saw something like this done in 1998. It's not new or different. It's been done so much that most of us got tired of the cutesies. Granted, the Burton one uses multiple images. <shrug> So what?

I wonder how long it's going to be before we see the clock-that-follows-the-mouse scripts start re-appearing?

11-12-2010, 08:20 PM
Any suggestions on how this can be achieved? Is it the same script as the one referenced by connolyc4? Do you happen to know of any resources that can help me understand how the burton example was done? Also this example only uses one image http://demandware.edgesuite.net/aadf_prd/on/demandware.static/Sites-Burton_US-Site/-/default/v1289587563132/images/common/sprite-eyes.gif

Old Pedant
11-12-2010, 09:34 PM
The burton eyes are easy to do and easy to see how they are done. Here's the relevant code:

followEyes : function() {
var eyes = jQuery('#globalSearch #eyes');
var top = eyes.offset().top;
var left = eyes.offset().left;
var height = eyes.height();
var width = eyes.width();

jQuery('body,html').mousemove(function(e) {
var className = '';
if (e.pageY > top+height) {
className += 's';
} else if (e.pageY < top) {
className += 'n';

if (e.pageX > left+width) {
className += 'e';
} else if (e.pageX < left) {
className += 'w';
eyes.attr('class', className);

So he simply has a whole series of CSS classes that he applies to the <div> containing the eyes. I would guess that the CSS simply specifies a background image for the <div>; I didn't go digging into all his CSS to find the classes.

If it's not obvious, his class names are n,ne,e,se,s,sw,w,nw plus a blank name apparently means "in the center".

11-12-2010, 10:27 PM
Thats exactly what I was looking for. Thanks!

11-12-2010, 10:35 PM
For anyone else who way encounter this, the associated css from burton is:

#eyes {
position: absolute;
top: 11px;
left: 1px;
width: 52px;
height: 22px;
background: transparent url url(../img/sprite-eyes.gif) no-repeat -82px -96px;
border-right: 1px solid #cecece;
.short #eyes {
top: 3px;
left: 0;
height: 18px;
padding-top: 4px;
#eyes.on { background: transparent url(..img/eyes-hover1.gif) no-repeat -10px -25px; }
#eyes.n { background-position: -82px -25px; }
#eyes.ne { background-position: -154px -25px; }
#eyes.e { background-position: -154px -96px; }
#eyes.se { background-position: -154px -169px; }
#eyes.s { background-position: -82px -169px; }
#eyes.sw { background-position: -10px -169px; }
#eyes.w { background-position: -10px -96px; }
#eyes.nw { background-position: -10px -25px; }

Old Pedant
11-12-2010, 10:53 PM
FWIW, you could accomplish the same thing (a) without using jQuery and/or (b) changing the src or an <img> instead of using CSS classes.

Finally, if it's not obvious, I'm 90% sure his images are animated GIFs, which is how he gets the blinking eyes.

Old Pedant
11-12-2010, 10:57 PM
Ah...I was a bit slow. But here is the image. It's all one image! Cute.


He just changes the position of the image to bring the appropriate set of eyes into the visible part of the <div>.

11-12-2010, 11:00 PM
Yes, The image is an animated .gif although, I think there is a missing component here. Im not sure if it is CSS or JS. A sample page I created still wont function.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/eyes.css" rel="stylesheet" type="text/css" />
<script src="js/eyes.js" type="text/javascript"></script>


<div id="container">
<div id="eyes"></div>


Old Pedant
11-12-2010, 11:23 PM
Yeah, it's called jQuery. His code *DEPENDS* upon jQuery.

Old Pedant
11-12-2010, 11:24 PM
I might also point out that his image file is copyrighted. I would NOT suggest using it on a public site.

11-12-2010, 11:58 PM
thanks for the heads up. I definitely wouldn't use the image and the code will be overhauled for anything i would post publicly. I wounder what jQuery he is using for this. chances are, it has a general public license.

Old Pedant
11-13-2010, 12:16 AM
jQuery is public, yes. His little script (that I posted in #7) is probably copyrighted, but it would be trivial to accomplish the same thing using your own (and slightly different) code. And, as I said, you could also do this by using separate images and no need for the cutesy background image trick and and and.

11-13-2010, 02:06 AM
lol, yea I did think having the 9 different eyes positioned of one .gif and specifying pixel position for each location was overkill as well, although it seems to be a trend for link rolls lately. Any suggestions or point of reference for creating this with out jQuery? My knowledge in java script is not the best.

Thanks in advance.

Old Pedant
11-13-2010, 02:42 AM
If you aren't going to use jQuery then go to that site pointed out to you in post #2.

It's explains everything more clearly than I would/could.

11-13-2010, 03:02 AM
got it will do, I appreciate all the help. Thanks

11-13-2010, 08:04 AM
rofl that's extremely easy to do.

11-13-2010, 08:53 AM
James -
If it is so easy, please feel free to shine some light on this topic. I would ask you to take a closer look at the source code before doing so because this is not the generic watching eye js. It is actually something a little different.

Old Pedant
11-13-2010, 11:57 PM
"jameslasner" is apparently an advertising robot. "His" message is a clone of Afro's post earlier in this thread. He probably tried to also post advertising that got rejected, so all that's left is the cloned message.