I am in the process of creating a website for a friend in which visitors can make their very own Cartoon Doll. The basics: visitors choose a property from a seperate IFRAME (e.g. a head and body) and they load into the document frame where there is a section where they can create their cartoon with the images added to the document from the IFRAME. Confusing? well take a look at the script below.

My question is, if u can answer this, how would i get the layered image loaded into the document (from the IFRAME) to change its visibility to "hidden" in the "Trash Can" area.

If you want a closer look at this page in its full detail. Visit this page!

Code:
<html>
<head>
<title>Cartoon Maker</title>
<script>

function doStartUp(){
document.all.palsel.selectedIndex = 1; //default startup pallet index number from select box
doPalSel();
}

var ip = 0;
var pics = new Array(100);
var curlayimg;
var isPropOpen = false;

function doPalSel(){
 var x = document.all.palsel.value;
 if (x != '')
 document.all.PalFrame.src = x;
}

function imgAdd(x,h,w){
 pics[ip] = new Image(w,h);
 pics[ip].src = x;
 pics[ip].name = 'img' + ip;
 pics[ip].className = 'drag';
 pics[ip].style.position = 'absolute';
 pics[ip].style.pixelLeft = 200;
 pics[ip].style.pixelTop = 100;
 document.all.worktd.appendChild(pics[ip]);
 ip++;
}

function closeMagic(){
 document.all.divMagic.style.visibility = 'hidden';
}

function openMagic(){
 document.all.divMagic.style.visibility = 'visible';
}

var dragapproved=false
var z,x,y
function move(){
 if (event.button==1&&dragapproved){
   z.style.pixelLeft=temp1+event.clientX-x
   z.style.pixelTop=temp2+event.clientY-y
   if ((event.clientY) >= 300){
     //delete image
     dragapproved=false;
     var n = event.srcElement.name;
     document.all.worktd.removeChild(event.srcElement);
     eval("pics[" + n.substring(3,n.length) + "].src = ''");
     return true;
   }else{
     return false;
   }
 }
}

function imgDouble(){
 if (curlayimg != null){
   var cw = curlayimg.width;
   var ch = curlayimg.height;
   cw = parseInt(cw*2);
   ch = parseInt(ch*2);
   curlayimg.width = cw;
   curlayimg.height = ch;
   document.all.datw.innerHTML = '' + curlayimg.width;
   document.all.dath.innerHTML = '' + curlayimg.height;
 }
}
function imgKill(){
 if (curlayimg != null){
   var n = curlayimg.name;
   document.all.worktd.removeChild(curlayimg);
   eval("pics[" + n.substring(3,n.length) + "].src = ''");
   curlayimg = null;
       document.all.datsrc.innerHTML = '';
       document.all.datw.innerHTML = '';
       document.all.dath.innerHTML = '';
       document.all.datx.innerHTML = '';
       document.all.daty.innerHTML = '';
 }
}

function drags(){
 if (!document.all)
   return
 if (event.srcElement.className=="drag"){
     dragapproved=true
     z=event.srcElement
   //set drag variables
   temp1=z.style.pixelLeft
     temp2=z.style.pixelTop
     x=event.clientX
   y=event.clientY
     document.onmousemove=move
 }else{
   if (event.button==2||event.button==3) {
   }
     return false;
 }
}
document.onmousedown=drags
document.onmouseup=new Function("dragapproved=false")

</SCRIPT>
<base target="_self">
</head>

<body onselectstart="return false" bgcolor=#E091B6 link=#FFFFFF vlink=#FFFFFF text=#000000 topmargin=0 rightmargin=0 leftmargin=0 marginwidth=0 marginheight=0>

<p align="center"><img src="images/dollmaker.gif"></p>

<!-- *** WITHIN THE IMG BELOW IMAGE IS A SMALL AREA IN THE BOTTOM LEFT OF A TRASH BAG WHERE PEOPLE CAN REMOVE IMAGES *** -->
<p align="center"><img src="images/maker_section.gif" width="661" height="296" border=0></p>
<!-- *** WITHIN THE IMAGE ABOVE IS A SMALL AREA IN THE BOTTOM LEFT OF A TRASH BAG WHERE PEOPLE CAN REMOVE IMAGES *** -->

<p align="center"><img src="images/maker_prop_section.gif" width="661" height="296" border=0></p>

<!-- *** THE WORK AREA (NOTE: THE TRASH BAG ISN'T WITHIN THIS TABLE *** -->
<div style="position:absolute;left:12px;top:94px;" style="width:504;height:278;filter:alpha(opacity=transparent);overflow:hidden">
<table width="504" height="278" cellpadding=0 cellspacing=0 border=0>
<tr><td id=worktd width="100%" height="100%" bgColor="#E091B6"><img id=back_img style="visibility:hidden;" src="" border=0></td></tr>
</table></div>


<!-- *** VISITORS CAN CHANGE THE BGCOLOR OF THE WORK AREA *** -->
<div style="position:absolute;left:522px;top:94px;" style="width:149;height:164;filter:alpha(opacity=transparent);overflow:auto">
<table width="149" height="164" cellpadding=2 cellspacing=0 border=0>
<tr><td width="100%" height="100%" bgColor="#E091B6">
<p align="center"><b>Preset Colours:</b><br>
<select id=bgpick style="font-family:verdana;font-size:8pt;background:transparent;color:#000000;width:120px;" onchange="doBGPick();">
<optgroup label="Select Colour...">
<option value="#E091B6" selected>Preset</option>
<option value="#000000">Black</option>
<option value="#FFFFFF">White</option>
</optgroup>
</select></p>
<p align="center"><form><b>Custom Colour:</b><br>
<input type="text" name="text" value="#000000" size=10 maxlength=15>
<input type="button" name="button" value="Set" onclick="doBGPick2(this.form)"></form>
</p>

<!-- *** VISITORS CAN DECIDE WHAT LOADS INTO THE IFRAME BELOW *** -->
<p align="center"><b>Available Props:</b>
<br><select name=palsel style="font-family:verdana;font-size:8pt;background:transparent;color:#000000;width:120px;" onchange="doPalSel();">
<optgroup label="Select Props...">
<option value="heads.htm">Heads</option>
<option value="bodies.htm">Bodies</option>
<option value="props.htm">Props</option>
</optgroup>
</select></p>

</td></tr>
</table></div>

<!-- *** PALETTE OF PROPERTIES LOAD INTO THIS IFRAME *** -->
<div style="position:absolute;left:12px;top:409px;" style="width:659;height:278;filter:alpha(opacity=transparent);overflow:auto">
<iframe name="PalFrame" src="" width="100%" height="100%" scrolling=yes frameborder=0>Your browser does not support inline frames or is currently configured not to display inline frames.</iframe></div>

</body>
</html>