# Load images and onRollOver button play mask and reveal image?

**URL:** <https://forum.kirupa.com/t/load-images-and-onrollover-button-play-mask-and-reveal-image/203828>\
**Category:** Uncategorized\
**Created:** [October 14, 2006, 4:22pm UTC](https://forum.kirupa.com/t/load-images-and-onrollover-button-play-mask-and-reveal-image/203828 "2006-10-14T16:22:36Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![keitai](https://avatars.discourse-cdn.com/v4/letter/k/73ab20/32.png) [@keitai](https://forum.kirupa.com/u/keitai)\
**Post date:** [October 14, 2006, 4:22pm UTC](https://forum.kirupa.com/t/load-images-and-onrollover-button-play-mask-and-reveal-image/203828/1 "2006-10-14T16:22:36Z")

</div>

I have this loadImages function

```auto

var pics:Array = ["image0.jpg","image1.jpg","image2.jpg","image3.jpg"];
var imagePath = "imgs/";
function loadImages(){
	for(i=0;i<pics.length;i++){
			var pic:MovieClip = this.createEmptyMovieClip("pic"+i,i,{_width:740,_height:230,_y:157,_x:(60*i)});
			pic.id = i;
			pic._x = (60)*(i);//just to check if all 4 images are loaded
			pic.loadMovie(imagePath + pics*);
		}
}
loadImages();
//now for the onrollover/mask
function imageMask(pic){

	pic.setMask(theMask);
	theMask.play();
}

function buildNav() {
	for(i=0;i<navArray.length;i++){
		this["navBtn"+i].navTxt.text = navArray*;
		this["navBtn"+i].onRollOver = function(){
			imageMask("pic"+i);//play the mask and reveal corresponding image
			}
		}
}

```

Any suggestions or tutorials???