Solved

How did they make the heads move on this page?

Posted on 2011-02-17
5
931 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
5 Comments
 
LVL 70

Accepted Solution

by:
Jason C. Levine earned 500 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:gurvinder372
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 51

Expert Comment

by:HainKurt
ID: 34923510
0
 
LVL 51

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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

786 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