Images Changing Width Within Constrained Area

Hello,

I’m creating a web site that is composed by 9 images, side by side. The site is 968 px wide and 200 px high. Each of the 9 images is 484 px wide and 200 px high originally, but they are masked so that they first appear to have the widths 22, 33, 44, 55, 66, 77, 88, 99, and 484. When the user mouses over a picture, that picture is “swelling out” and showing itself in it’s whole width (484), while the others “shrink” to give room for the big one. It’s random which picture has the width 22, 33, 44, 55, 66, 77, 88, or 99, but the “chosen” picture is always 484 wide and the sum of the width of the other 8 pictures is always 484 as well.

In other words, I want to have the masks tween in size to reveal the image that is rolled over and at the same time have the other 8 masks randomly shrink only revealing a portion of each picture…

Does anyone have an idea of how this could be programmed?

Many thanks for your help, below is a picture that might clarify things.

what part of the picture would you like it reveal? top-left, center, what? maybe i can help.

Hi and thank you!
When the picture is masked we see only it’s middle part, and when it’s unmasked we see the whole picture. This means that it’s not only a matter of unmasking the pictures, they also have to move left-right so that the screen is always filled and so that no part of the chosen image is outside the borders of the flash screen. The image below shows the image in it’s masked an unmasked state.

-WTK

i’ll work on a sample and see if it’s what you’re referring to.

Thanks a lot for your help.

I found one menu that is very similar to what I want to achieve here:

http://www.fameid.com/menu/index.php?option=com_content&task=view&id=16&Itemid=20

Unfortunately they don’t give away the flash code though, so you can’t customize fonts, individual width of columns etc.

Best,
wtk