?
Solved

How did they make the heads move on this page?

Posted on 2011-02-17
5
Medium Priority
?
943 Views
Last Modified: 2012-05-11
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
0
Comment
Question by:elliottbenzle
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
5 Comments
 
LVL 70

Accepted Solution

by:
Jason C. Levine earned 2000 total points
ID: 34923253
Hi elliottbenzle,

It's a custom javascript they wrote based in jquery.  The links are at the bottom of the page.
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 34923273
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
0
 
LVL 57

Expert Comment

by:HainKurt
ID: 34923510
0
 
LVL 57

Expert Comment

by:HainKurt
ID: 34923572
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...
0
 
LVL 5

Expert Comment

by:SaigonJeff
ID: 34924688
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.
0

Featured Post

Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
When it comes to security, close monitoring is a must. According to WhiteHat Security annual report, a substantial number of all web applications are vulnerable always. Monitis offers a new product - fully-featured Website security monitoring and pr…
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question