asked on

How did they make the heads move on this page?

This is a cool effect and I'd like to know how they did it. Is it javascript? and if so how does it get the cursor position in relation to the heads?

http://www.technologywithpassion.com/about-us/team/

Thanks

ASKER CERTIFIED SOLUTION

Jason C. Levine

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Gurvinder Pal Singh

they are simply replacing the current image with another after a certain interval.

You can scroll down the source to see the various tools used to do the same

HainKurt

check this function

http://s3.amazonaws.com/lateralstatic/js/lateral-eye.js

HainKurt

for each person they took 8 black & white and one color photo, total 9

for cristi for example: colored, center one:
http://s3.amazonaws.com/lateralmedia1/cristi_cc.jpg

others can be found by replacing cc with one of these
dir=['c','s','sv','v','nv','n','ne','e','se','s','c1','cc']

http://s3.amazonaws.com/lateralmedia1/cristi_c.jpg
http://s3.amazonaws.com/lateralmedia1/cristi_s.jpg
...
http://s3.amazonaws.com/lateralmedia1/cristi_c1.jpg
http://s3.amazonaws.com/lateralmedia1/cristi_cc.jpg

on mouse move they find the mouse x,y relative to each image... then for each image they change the src...

SaigonJeff

Can easily be done with a simple multi-image rollover behavior in Dreamweaver... All you need are the images for each face in the left forward and right position.

Here is a great tutorial to get you started.

http://www.stockvault.net/tutorials/dreamweaver-multible-rollovers

Let us know how you make out.