# Help with thumbnail and borders behavior

**URL:** <https://forum.kirupa.com/t/help-with-thumbnail-and-borders-behavior/255049>\
**Category:** Uncategorized\
**Created:** [March 18, 2008, 4:03pm UTC](https://forum.kirupa.com/t/help-with-thumbnail-and-borders-behavior/255049 "2008-03-18T16:03:52Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![mvickers](https://avatars.discourse-cdn.com/v4/letter/m/4af34b/32.png) [@mvickers](https://forum.kirupa.com/u/mvickers)\
**Post date:** [March 18, 2008, 4:03pm UTC](https://forum.kirupa.com/t/help-with-thumbnail-and-borders-behavior/255049/1 "2008-03-18T16:03:52Z")

</div>

Hello  
I am uploading thumbnail images from an xml file. I want the first image to be grayed out (not the border) and the rest of the images to be left as originally loaded (thumbnails with color and black border). Eventually I want the border to change color as well…  
On rollover and release of any of the thumbnails they will change to gray on rollOut return to their original state.

The problem I am having is on initial setup I can’t get the image to be gray and keep the border black.

Here is the code and you can see the behavior on this url [http://matildemata.com/maanas/maanas.html](http://matildemata.com/maanas/maanas.html) - I expect the image on the right to be grayed out in the begining but its not until I rollover it that its grayed out. Any help would be gladly appreciated.

function setUpThumbnails(): Void{  
tN=gridXML.firstChild.childNodes.length;  
portfolioItem= gridXML.firstChild.childNodes;  
for (var i = 0; i\<tN; i++){  
thumb = thumbHolder.createEmptyMovieClip(“thumbmc\_”+i, i);  
thumb._y = yPos;  
thumb.x=startingXPos - Math.ceil((i\*(gapBCells+imageProp)));  
tImage = thumb.createEmptyMovieClip("imagemc" +i, i);  
tBorder = thumb.createEmptyMovieClip("bordermc_"+i, i+1);  
imgPath= thumbNailPath + portfolioItem\*.attributes.thumbnail;  
loadImages(tImage, imgPath );  
drawBorder(tBorder); // (function that draws a border around the thumbnail)  
enableButtons(thumb,parseInt(tnId));  
thumbHolder.\_visible=true;  
}

}

function enableButtons(mc:MovieClip,idx:Number) : Void{  
//First check which button was selected and have that button greyed out and the rest highlited

for (var i=0;i\<tN; i++){  
var thumb:MovieClip = thumbHolder[“thumbmc\_”+i];  
if (i !== idx)  
{

thumb[“imagemc\_” +i].removeGrayscale();  
}  
else{  
thumb[“imagemc\_” +i].setToGrayscale();

}  
}

mc.onRollOver = function(){  
for (var i = 0; i\<tN; i++) {  
var thumb:MovieClip = thumbHolder[“thumbmc\_”+i];

if (thumb == this ) {  
trace(" on rollover:" + thumb[“imagemc\_” +i]);  
thumb[“imagemc\_” +i].setToGrayscale();

}  
}  
};

mc.onRollOut= function(){  
for (var i = 0; i\<tN; i++) {  
var thumb:MovieClip = thumbHolder[“thumbmc\_”+i];

if (i !== idx ) {  
thumb[“imagemc\_” +i].removeGrayscale();

}  
}  
};

mc.onRelease=function(){  
index = determineIndex(mc);  
loadDetails(gridXML.firstChild.childNodes[index]);  
for (var i = 0; i\<tN; i++){  
var thumb:MovieClip = thumbHolder[“thumbmc\_”+i];  
enableButtons(thumb,index);  
}  
}

}  
function determineIndex (mc:MovieClip):Number{  
var helper\_st:String = mc._name;  
var lastChar = helper\_st.indexOf("_")+1;  
var index = parseInt(helper\_st.substr(lastChar));  
return index;  
}