# Images Unmasked On Mouseover

**URL:** <https://forum.kirupa.com/t/images-unmasked-on-mouseover/265795>\
**Category:** flash\
**Created:** [July 12, 2008, 4:48pm UTC](https://forum.kirupa.com/t/images-unmasked-on-mouseover/265795 "2008-07-12T16:48:52Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![willythekid](https://avatars.discourse-cdn.com/v4/letter/w/b782af/32.png) [@willythekid](https://forum.kirupa.com/u/willythekid)\
**Post date:** [July 12, 2008, 4:48pm UTC](https://forum.kirupa.com/t/images-unmasked-on-mouseover/265795/1 "2008-07-12T16:48:52Z")

</div>

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 “unmasked” 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.

---

<div class="post-metadata">

**Author:** ![willythekid](https://avatars.discourse-cdn.com/v4/letter/w/b782af/32.png) [@willythekid](https://forum.kirupa.com/u/willythekid)\
**Post date:** [July 12, 2008, 4:50pm UTC](https://forum.kirupa.com/t/images-unmasked-on-mouseover/265795/2 "2008-07-12T16:50:50Z")

</div>

oops, i forgot the image:

---

<div class="post-metadata">

**Author:** ![glosrfc](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/glosrfc/32/8334_2.png) [@glosrfc](https://forum.kirupa.com/u/glosrfc)\
**Post date:** [July 13, 2008, 12:05am UTC](https://forum.kirupa.com/t/images-unmasked-on-mouseover/265795/3 "2008-07-13T00:05:44Z")

</div>

This source should help  
[http://www.visual-blast.com/flash/accordion-style-flash-menu/](http://www.visual-blast.com/flash/accordion-style-flash-menu/)

---

<div class="post-metadata">

**Author:** ![willythekid](https://avatars.discourse-cdn.com/v4/letter/w/b782af/32.png) [@willythekid](https://forum.kirupa.com/u/willythekid)\
**Post date:** [July 13, 2008, 2:57pm UTC](https://forum.kirupa.com/t/images-unmasked-on-mouseover/265795/4 "2008-07-13T14:57:29Z")

</div>

thanks a lot for these answers, very helpful!  
:pac:

-wtk