...

View Full Version : Draggable Elements...



Mr Cue
06-20-2004, 07:04 PM
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 (http://www.pinkproductionz.com/v3/html/misc/maker.htm)!


<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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum