How would I give the buttons in this image gallery a rollover effect, as well as assign each of them individual labels?

Question

So I am trying to make these "Buttons" in my image gallery have some sort of rollover effect (text change color) , also instead of saying "Linus0", "Linus1", "Linus2", I would like to assign each one its own label. Am I able to do this with an array? Also - what am I doing wrong thats making it think there are six images total? There are only 5, and I only need 5 buttons. Thanks in advance! Here is my code so far:

var myPics:Array = new Array ("image0", "image1", "image2", "image3", "image4");

var totalItems: int = myPics.length;



function createLabels () : void {
for (var i:int=0; i<=totalItems; i++){
 var btn_label:TextField = new TextField ();
 this.addChild (btn_label);
 btn_label.name = "image"+i;

 var format:TextFormat = new TextFormat ();
 format.font = "Verdana";
 format.color = 0x000000;
 format.size = 12;


 btn_label.defaultTextFormat = format;

 btn_label.x = 55;
 btn_label.y = 50+ (i*20);

 btn_label.text = "Linus"+i;
}
};

function makeMenu ():void {
for (var i:int=0; i<=totalItems; i++) {
 var myBtn:button = new button;
 this.addChild (myBtn);
 myBtn.name = "image"+i;


 myBtn.x = 55;
 myBtn.y = 50+ (i*20);
 myBtn.addEventListener(MouseEvent.CLICK, btnPress);
 myBtn.addEventListener(MouseEvent.CLICK, btnPress);
trace(i);

    }
};

 createLabels ();
 makeMenu ();

 var myFrame: frame = new frame;
 this.addChild (myFrame);
 myFrame.name = "frame";
 myFrame.x = 200;
 myFrame.y = 70;

 var myLoader:Loader = new Loader ();

 function btnPress (event:MouseEvent):void{
  this.enabled = true;
  myLoader.load (new URLRequest("images/"+event.target.name+".jpg"));
  addChild(myLoader);
  myLoader.x = 201;
     myLoader.y = 71;
 };

Answer 1

the reason you are getting 6 instead of 5 is that you are use <= rather than <. Because 'i' starts at 0 this means the loop counts 6 times.

As for a rollover effect if you only want to change the text color then this should do:

btn_label.addEventListener(MouseEvent.MOUSE_OVER, labelOver);


function labelOver(e:MouseEvent):void
{
    e.target.defaultTextFormat.color = 0xFF0000;
    e.target.defaultTextFormat = format;
    btn_label.addEventListener(MouseEvent.MOUSE_OUT, labelOut);
}

function labelOut(e:MouseEvent):void
{
    e.target.defaultTextFormat.color = 0x000000;
    e.target.defaultTextFormat = format;
    btn_label.removeEventListener(MouseEvent.MOUSE_OUT, labelOut);
}

Answer 2

+1 what oliver said

as for this

also instead of saying "Linus0", "Linus1", "Linus2", I would like to assign each one its own label. Am I able to do this with an array?

yes you can define an array of strings containing valid names and then populate your button labels with that.