Home/ Questions/Q 8418871
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T02:26:50+00:00

I’m trying to create a jQuery effect for this block . The idea is,

  • 0

I’m trying to create a jQuery effect for this block.
The idea is, that on mouseover the other photos are “looking” at the selected one. Here is the html code.

<ul class="team">
    <li><img src="pics/team/t-0001.jpg" alt=""/></li>
    <li><img src="pics/team/t-0002.jpg" alt=""/></li>
    <li><img src="pics/team/t-0003.jpg" alt=""/></li>
    ...
</ul>

Theoretically I understand, that when the mouse is over one of these li elements, I have to change the src value of images in the others. And there are several arrays needed where these paths can be stored.

But in practice I have big problems.

What should I do first? May be there are some examples or plugins?

I will appreciate any help.

Thank you for help! Sorry, could not answer earlier, had a lot of work to do.

I have found a solution. It is very simple and not so flexible, but it works. I’m using background images.

Here is the example http://jsfiddle.net/KSYUC/4/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    One way you could simplify the problem, by not having 9 images of each person, is to actually work with one composite image per person, with all possibilities.
    Maybe something like this (the arrow shows the direction in which the person should be looking) in one single image:

    Face direction

    This lets you alter the direction just by changing the background position (using the regular intervals that are determined by your image size) of the image through CSS.
    It also has the benefit that all possibilities for a face are loaded at the same time, and not when the face changes (which may cause the image to flicker or require preloading).

    Then you’d have to calculate which image to use for each face, depending its relative location to the selected one.
    It’s a matter of arithmetic comparison between coordinates.

    So if you iterate all faces against the selected one, then if the current’s Y is higher than the selected Y, then it’ll be one of the top three “sub-images”, and then you’d compare X to see if it is less, equal, or greater, to determine which one of the three.
    The same applies to all three rows of possible faces.
    Ultimately it boils down to comparing both Y and X for less, equal, or greater. That way you’d calculate the offset for both X and Y in the background position.

    • 0