PDA

Click to See Complete Forum and Search --> : detect image underneath layer(not bg-img!)

Shampie
10-24-2003, 01:54 PM
hello,

is there a way to detect wheater there is a picture underneath a layer? like if(layer = overimage){
action
}
?
Jona
10-24-2003, 02:30 PM
Assuming you have the following HTML:


<div id="hasImg">
<img src="file.gif" alt="">
</div>


You would use the following code to detect if an IMG tag is inside of the layer. (Note, the code has not been tested.)


var imgDiv = document.getElementById("hasImg");
var divNodeLen = imgDiv.childNodes.length;

for(var l=0; l<divNodeLen; l++){
&nbsp;if(imgDiv.childNodes[l].type == "img"){
&nbsp; &nbsp;alert("Division contains an image.");
&nbsp;} else {
&nbsp; &nbsp;alert("No division");
&nbsp;}
}


[J]ona
Shampie
10-24-2003, 06:18 PM
it will keep giving no division at all time,

var imgDiv = document.getElementById("hasImg "); I replaced it with the layer that should detect the image when it moves over it.. (object0 in the case)
Jona
10-24-2003, 08:22 PM
var imgDiv = document.getElementById("hasImg");
var divNodeLen = imgDiv.childNodes.length;
var imgYes = false;

for(var l=0; l<divNodeLen; l++){
&nbsp;if(imgYes==false){
&nbsp;if(imgDiv.childNodes[l].nodeName == "IMG"){
&nbsp;&nbsp;imgYes=true;
&nbsp;} else {
&nbsp;&nbsp;imgYes=false;
&nbsp;}
} }
&nbsp;if(imgYes==true){
&nbsp;alert("Division contains an image");
} else {
&nbsp;alert("No image in division.");
&nbsp;}
}


[J]ona
Shampie
10-24-2003, 08:40 PM
now it constantly detects an image even when its not there (there is a layer you can move with the arrow keys, when it moves over either an image or other layer or background it keeps giving it and bg does not have a image)
Jona
10-24-2003, 08:45 PM
Originally posted by Shampie
([T]here is a layer you can move with the arrow keys, when it moves over either an image or other layer or background it keeps giving it and bg does not have a image)

Huh? :confused:

[J]ona
Shampie
10-24-2003, 08:48 PM
okay from beginning ;)

I have a layer with a image on it (say a smiley) it can move over the screen.
When the layer touches an image OR another layer it should give a message.
Jona
10-24-2003, 08:53 PM
In that case, you'll need to check if the smiley's top-pixel matches or is less than the bottom-pixel of all elements above it when the function that moves the smiley is called. You'll have to do that for each direction as well. Assuming everything is formatted by absolute positioning, this shouldn't be very difficult. However, here is a page created by none other than Dave Clark and it should help you out a bit... http://www.daveclarkconsulting.com/research/drag_n_drop.html (Remember, give Dave full credit for this.)

[J]ona
Shampie
10-24-2003, 09:16 PM
Honestly I have a hard time understanding that script you supplied me the link to.

I can do it another way but that will be the long way.. I presume that'd be better for me to do which I understand aswell..

<me moving to fast?!>
Jona
10-24-2003, 09:28 PM
Do what you can; learn from the example. ;)

[J]ona
Shampie
10-24-2003, 09:51 PM
But I don't understand the example, how can I learn from it then? could you 'drag it appart' ?
Jona
10-25-2003, 03:51 PM
I'm gonna break down the code for you, and perhaps this will help... I changed none of the HTML, and the event handling in the DIV's should be simple enough for you to understand.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><title>Drag-n-Drop</title>
<style>
<!--
div.dropArea { position:relative; width:100px; height:100px; z-index:+1;
border:2px solid black; padding:0; margin:0; text-align:center;
background-image: url('../images/transparent.gif'); } /* dropArea division class */
-->
</style>
<script language="JavaScript">
<!-- // Begins
currDiv = null;
saveDiv = null;
saveIdx = null;
mouseLeft = null;
mouseTop = null;
// Set above variables to null (false), and also make them global
function setDrag(div, e) { // e sent for Netscape
&nbsp;if (window.Event) { // if Netscape
&nbsp; if (e.which != 1) return true; // if not first mouse button, exit function
&nbsp; &nbsp;mouseLeft = e.pageX; //set mouseLeft to the X position of the mouse on the page
&nbsp; &nbsp;mouseTop = e.pageY; //do the same for the Y axis
&nbsp; &nbsp;currDiv = div; // set current div to div passed to function
&nbsp; &nbsp;document.captureEvents(Event.MOUSEMOVE); // capture mousemove event (NS)
&nbsp; &nbsp;document.onmousemove = function(event) { return moveDrag(event); }; // when the mouse moves, call the moveDrag() function and pass the event to it
&nbsp;} else { // if IE
&nbsp; if (e.button != 1) return true; // if not left mouse click, exit function
&nbsp; &nbsp;mouseLeft = e.clientX; // set mouseLeft to the X position of the mouse on the page
&nbsp; &nbsp;mouseTop = e.clientY; // do the same for Y-axis
&nbsp; &nbsp;currDiv = div; // set the current div to the div passed to this function
&nbsp; &nbsp;document.onmousemove = function() { return moveDrag(event); }; // when the mouse moves, call the moveDrag() function, and pass the window.event to it
&nbsp; }
&nbsp;return true; // return true, ending the function
}

function moveDrag(e) { //begin moveDrag(event) function
&nbsp;if (currDiv) { // if a division has been clicked
&nbsp;&nbsp;if (window.Event) { //if NS
&nbsp;&nbsp;&nbsp;currDiv.moveBy((e.pageX - mouseLeft),(e.pageY - mouseTop)); // move the current division by the left position of mouse minus the current position of the mouse's X-axis, and do the same for the Y-axis
&nbsp;&nbsp;&nbsp;mouseLeft = e.pageX; // set mouseLeft to the current X-axis of the mouse so that you can drag more than one pixel horizontally
&nbsp;&nbsp;&nbsp;mouseTop = e.pageY; // set mouseTop to the current Y-axis of the mouse so that you can drag more than one pixel vertically
&nbsp;&nbsp;} else { // if IE
&nbsp;&nbsp;&nbsp;currDiv.style.posLeft = currDiv.style.posLeft + (e.clientX - mouseLeft); // set the position-left of the current div to mouseLeft minus the current X-axis of the mouse so that you can drag more than one pixel horizontally
&nbsp;&nbsp;&nbsp;currDiv.style.posTop = currDiv.style.posTop + (e.clientY - mouseTop); // set the position-top of the current div to mouseTop minus the current Y-axis of the mouse so that you can drag more than one pixel vertically
&nbsp;&nbsp;&nbsp;mouseLeft = e.clientX; //set the mouseLeft to the current X-position of the mouse
&nbsp;&nbsp;&nbsp;mouseTop = e.clientY; // do the same for the Y-axis
&nbsp;&nbsp;}
&nbsp;return false; // exit function and return false if currDiv == null
&nbsp;}
return true; // exit function and return true if currDiv != null
}

function endDrag(e) { // endDrag() function, e = window.event
&nbsp;if (window.Event) { // if NS
&nbsp;&nbsp;if (e.which != 1) return true; // if not left mouse-click, exit function and return true
&nbsp;&nbsp;&nbsp;document.releaseEvents(Event.MOUSEMOVE); // stop dragging the currDiv
&nbsp;} else { // if IE
&nbsp;&nbsp;if (e.button != 1) return true; // if not left mouse-click, exit function and return true
&nbsp;}
&nbsp;&nbsp;if (currDiv == null) return true; // if no div is being dragged, exit and return true
&nbsp;document.onmousemove = null; // release onMouseMove event
&nbsp;saveDiv = currDiv; // set saveDiv to the current div
&nbsp;saveIdx = currDiv.style.zIndex // do the same with z-Indexes
&nbsp;currDiv.style.zIndex = 0; // set z-index to zero
&nbsp;currDiv = null; // set currDiv to null
&nbsp;mouseLeft = null; // set mouseLeft to null
&nbsp;mouseTop = null; // set mouseTop to null
&nbsp;return true; // return true, leaving all variables null so that a different division may be dragged and dropped
}

function getDrop(div, e) { // begin getDrop function
&nbsp;var x, y; //initialize vars
&nbsp;&nbsp;if (saveDiv) { // if a division was saved
&nbsp;&nbsp;&nbsp;saveDiv.style.zIndex = saveIdx; // set that saved division's z-index to the saved z-index
&nbsp;&nbsp;&nbsp;if (window.Event) { // if NS
&nbsp;&nbsp;&nbsp;&nbsp;x = e.pageX; // set x to the current horizontal position of the mouse on the page
&nbsp;&nbsp;&nbsp;&nbsp;y = e.pageY; // and do the same for y
&nbsp;&nbsp;&nbsp;} else { // if IE
&nbsp;&nbsp;&nbsp;&nbsp;x = e.clientX; // set x to the current horizontal position of the mouse on the page
&nbsp;&nbsp;&nbsp;&nbsp;y = e.clientY; // and do the same for y
&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;alert("Object '"+saveDiv.id+"' dropped in '"+div.title+"'\n"+"at page coords "+x+":"+y); // alert coordinates, saved div id and div title
&nbsp;&nbsp;saveDiv = null; // clear saveDiv
&nbsp;}
return false; // return false, ending the function
}

function resetMove() { // begin resetMove function
&nbsp;if (saveDiv) { // if saveDiv exists
&nbsp;&nbsp;saveDiv.style.zIndex = saveIdx; // set its z-index
&nbsp;&nbsp;saveDiv = null; // clear saved div
&nbsp;}
return true; // if no saved div, exit and return true
}
// Ends -->
</script>
<meta name="Microsoft Theme" content="sumi-painting-custom- 111, default">
</head>

<body background="../_themes/sumi-painting-custom-/sumtextb.jpg" bgcolor="#FFFFCC" text="#000066" link="#660099" vlink="#993366" alink="#6666CC"><!--mstheme--><font face="Times New Roman">

<div id="drop1" class="dropArea" title="Drop Area 1"
onMouseMove="return getDrop(this, event);" style="float:left;">One</div>
<div id="drop2" class="dropArea" title="Drop Area 2"
onMouseMove="return getDrop(this, event);">Two</div>
<div id="drop3" class="dropArea" title="Drop Area 3"
onMouseMove="return getDrop(this, event);" style="float:left;">Three</div>
<div id="drop4" class="dropArea" title="Drop Area 4"
onMouseMove="return getDrop(this, event);">Four</div>

<div id="Heart" style="position:absolute; left:250px; top:20px; width:33px; height:30px; z-index:+2; cursor: pointer;"
onMouseDown="return setDrag(this, event);" onMouseUp="return endDrag(event);" onMouseMove="return resetMove();">
<img src="../images/heart.gif" border="0" width="33" height="30">
</div>
<div id="Snowflake" style="position:absolute; left:250px; top:70px; width:30px; height:33px; z-index:+3; cursor: pointer;"
onMouseDown="return setDrag(this, event);" onMouseUp="return endDrag(event);" onMouseMove="return resetMove();">
<img src="../images/snow.gif" width="30" height="33" border="0">
</div>
<div id="Leaf" style="position:absolute; left:250px; top:120px; width:31px; height:31px; z-index:+4; cursor: pointer;"
onMouseDown="return setDrag(this, event);" onMouseUp="return endDrag(event);" onMouseMove="return resetMove();">
<img src="../images/leaf.gif" border="0" width="31" height="31">
</div>
<div id="Sunflower" style="position:absolute; left:250px; top:170px; width:33px; height:33px; z-index:+5; cursor: pointer;"
onMouseDown="return setDrag(this, event);" onMouseUp="return endDrag(event);" onMouseMove="return resetMove();">
<img src="../images/sunflwr.gif" width="33" height="33" border="0">
</div>

<!--mstheme--></font></body>
</html>


[J]ona
Shampie
10-25-2003, 06:37 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="data/style/properties.css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<body onLoad="randommovenme()">
<script language="JavaScript" type="text/JavaScript">


if ('1'[0]) document.captureEvents(Event.KEYDOWN);
document.onkeydown = function(e) {
if (!e && window.event) e={which:event.keyCode
};

if(e.which ==38 && object0.style.pixelTop > 65){//n
gonorth();
}
if(e.which ==40 && object0.style.pixelTop < test.heightmap.height+30 ){//s
gosouth();
}
if(e.which ==37 && object0.style.pixelLeft > 24){//w
gowest();
}
if(e.which ==39 && object0.style.pixelLeft < (test.widthmap.width)){//e
goeast();
}}

function randommovenme(){
pause = 150
checkme()
nme.style.pixelTop = Math.round(nme.style.pixelTop) - Math.round(1/13*Math.round(nme.style.pixelTop - object0.style.pixelTop)) + Math.round(2-Math.round(Math.random() * 3) % 3) ;
nme.style.pixelLeft = Math.round(nme.style.pixelLeft) - Math.round(1/13*Math.round(nme.style.pixelLeft - object0.style.pixelLeft)) + Math.round(2-Math.round(Math.random() * 3) % 3 );
checkc()
setTimeout("randommovenme()",pause);}

function gonorth(){

test.objimg.src = 'north.gif';
object0.style.pixelTop = object0.style.pixelTop - 5;
test.ex.value = ""+object0.style.pixelTop+""+object0.style.pixelLeft+""
checkc()
}
function gosouth(){

test.objimg.src = 'south.gif';
object0.style.pixelTop = object0.style.pixelTop + 5;
test.ex.value = ""+object0.style.pixelTop+""+object0.style.pixelLeft+""
checkc()
}
function gowest(){

test.objimg.src = 'left.gif';
object0.style.pixelLeft = object0.style.pixelLeft - 5;
test.ex.value = ""+object0.style.pixelTop+""+object0.style.pixelLeft+""
checkc()
}
function goeast(){

test.objimg.src = 'right.gif';
object0.style.pixelLeft = object0.style.pixelLeft + 5;
test.ex.value = ""+object0.style.pixelTop+""+object0.style.pixelLeft+""
checkc()
}

function checkme(){
saveIdx = object0.style.zIndex
object0.style.zIndex = 0;
var currDiv = null;
var saveDiv = currDiv;
if (nme.style.zIndex = saveIdx){

alert("test");
saveDiv = null;
}
return false;
}

function checkc(){
var dest = "Top X:"+object0.style.posTop+"";
var desl = "Left Y:"+object0.style.posLeft+"";
var desb = "Bott. X:"+(object0.style.posTop+test.objimg.height)+"";
var desr = "Rigth Y:"+(object0.style.posLeft+test.objimg.width)+"";
var eest = "Top X:"+nme.style.posTop+"";
var eesl = "Left Y:"+nme.style.posLeft+"";
var eesb = "Bott. X:"+(nme.style.posTop+test.nmeimg.height)+"";
var eesr = "Rigth Y:"+(nme.style.posLeft+test.nmeimg.width)+"";
var theinfo =""+dest+" unit top <br>\n"+
""+desl+" unit left <br>\n"+
""+desb+" unit bottom <br>\n"+
""+desr+" unit right<br> |-> enemie info->|<br>\n"+
" "+eest+" nme top <br>\n"+
" "+eesl+" nme left <br>\n"+
" "+eesb+" nme bottom <br>\n"+
" "+eesr+" nme right <br>\n";

tdot.innerHTML = theinfo; //unit top
}


<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<form name=test>
<table width="251" height="221" border=2 align="left" cellpadding="0" cellspacing="0" bordercolor="#666666">
<tr bordercolor="#0033CC" bgcolor="#0033CC">
<td height="10" colspan="3" align=middle> <div align="center"><font color="#CCCCCC" size="1">
</font><font color="#000000" size="1"> </font></div></td>
<td height="10" colspan="4" align=middle><div align="right"><font color="#000000" size="1">
&nbsp; </font></div></td>
</tr>
<tr bordercolor="#CCCCCC" bgcolor="#CCCCCC">
<td height="10" colspan="3" align=middle>&nbsp;</td>
<td height="10" colspan="4" align=middle>&nbsp;</td>
</tr>
<tr bordercolor="#CCCCCC" bgcolor="#CCCCCC">
<td width="13" align=middle bordercolor="#CCCCCC" bgcolor="#CCCCCC">&nbsp;&nbsp;</td>
<td width="134" align=middle bordercolor="#CCCCCC" bgcolor="#00CCFF">
<div id="object0" style="position:absolute; width:16px; height:17px; z-index:2; left: 106px; top: 114px; overflow: visible;"><img name="objimg" src="left.gif" width="25" height="31"></div>
<div id="nme" style="position:absolute; width:47px; height:33px; z-index:1; left: 99px; top: 189px;"><img name="nmeimg" src="funny.gif" width="42" height="31" ></div>

<div id="tdot" style="position:absolute; width:201px; height:232px; z-index:4; left: 600px; top: 90px; background-color: #FF0000; layer-background-color: #FF0000; border: 1px none #000000;"></div>
</td>
<td colspan="5" align=middle bordercolor="#CCCCCC" bgcolor="#CCCCCC"><img name="heightmap" src="data/gfx/black.gif" width="13" height="285">
<div align="center"><font color="#CCCCCC" size="1"> </font></div>
</font></td>
</tr>
<tr bgcolor="#666666">
<td height="20" align=middle bordercolor="#CCCCCC" bgcolor="#CCCCCC"><div align="left"><font color="#CCCCCC" size="1">
</font><font color="#CCCCCC" size="1"> </font></div></td>
<td height="20" align=middle bordercolor="#CCCCCC" bgcolor="#CCCCCC"><img name="widthmap"src="data/gfx/black.gif" width="541" height="8"></td>
<td height="20" colspan="5" align=middle bordercolor="#CCCCCC" bgcolor="#CCCCCC"><font color="#000000" size="1">
<input name="ex" type="text" size=12 maxlength="8">
</font></td>
</tr>
</table>
</form>
</body>
</html>

// this is the full page I made, when the image your control is touched by the image that is heading for you it should give a message like "cought you!"

hope this will give more info for you..
Jona
10-25-2003, 06:46 PM
Since the "object0" DIV is positioned absolutely, and all objects that it can run into are absolutely positioned as well, simply check if(object0.style.pixelTop >= objectAboveObject0.style.top){ alert("You ran into the object above object0."); }

[J]ona
Shampie
10-25-2003, 06:55 PM
that was my first workout but for some reason I kept getting problems..

if the unit(the image you move around) right side contacts objects left side alert(gotcha!)
this for the top side,left side and bottom side of the unit.


For 1 object this can be figured out but the more objects the bigger the code will get, that is why I am looking for something more global.
besides the layers I also want to put images in the div part where you can move around, when the unit moves over that current action will be canceled alert("cannot go ther")
Jona
10-25-2003, 07:03 PM
Then what do you propose be done?

[J]ona
Shampie
10-25-2003, 07:13 PM
can javascript detect what kind of element (layer,image,button) on a location you give?

if so the center of the unit will function as the detector, the location of the center coords of the unit(so the unit-center) will read the location of the page, return an alert when there is an object (layer,image,button) at the location.

if this cannot be done I am going to be stuck with the long long way..
Jona
10-25-2003, 07:16 PM
Yes, JavaScript can do that, but only if you have the ID of the element. You could do a check on all the child elements of the BODY tag, though...


var bdy = document.getElementsByTagName("BODY")[0];
var div = document.getElementById("object0");

for(i=0; i<bdy.childNodes.length; i++){
&nbsp;if(bdy.childNodes[i].style.top <= div.style.top){
&nbsp;&nbsp;alert("Overlapping vertically over an "+bdy.childNodes[i].nodeName+" element.");
&nbsp;}
}


[J]ona
Shampie
10-25-2003, 07:48 PM
Okay what I am looking in on the page will be in the table part.

var bdy = document.getElementsByTagName("TABLE")[0];

correct?
this will return TBODY (means table body I presume?)

how can I let it read wheter there is or is not an image at its location now then? (TBODY will return the first TR)?
Jona
10-25-2003, 07:52 PM
The following code sets the variable "bdy" to select the BODY tag itself.


var bdy = document.getElementsByTagName("BODY")[0];


The method used to select the BODY tag always returns an array; so if you replaced the BODY part in the above code with TABLE, it would return the first table in the document. The for() loop sorts through the nodes inside of the element, so there is no need to do any more work to select a different element inside of the body tag.

[J]ona
Shampie
10-25-2003, 08:02 PM
I check this (http://www.howtocreate.co.uk/tutorials/texterise.php?dom=1) link about document nodes but it is of little help..

back to the page..

The code so far only reads the elements of the page,
though I am looking for that when my layer(with image in it) is touching another layer or image it should give a message.
Jona
10-25-2003, 09:29 PM
Okay, what is the code for the function that moves the object0 DIV?

[J]ona
Shampie
10-25-2003, 09:48 PM
I have changed it to positioning for now untill I can implement an easier way.
There is a non-moving image(on layer) in the screen now, when you touch it however it will freeze all function.
Why does it do that? (I tried to let it do a opposite action (like when pressing south it will go north)) any id?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="data/style/properties.css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<body onLoad="randommovenme()">
<script language="JavaScript" type="text/JavaScript">


if ('1'[0]) document.captureEvents(Event.KEYDOWN);
document.onkeydown = function(e) {
if (!e && window.event) e={which:event.keyCode
};
var object = "guy";
//eval("map.loc"+locc+".value")
var dest = object0.style.posTop;
var desl = object0.style.posLeft;
var desb = object0.style.posTop+test.objimg.height;
var desr = object0.style.posLeft+test.objimg.width;
var eest = eval(""+object+".style.posTop");
var eesl = eval(""+object+".style.posLeft");
var eesb = eval(""+object+".style.posTop+test.nmeimg.height");
var eesr = eval(""+object+".style.posLeft+test.nmeimg.width");
if(e.which ==38 && object0.style.pixelTop > 65){//n
if(eesb >= dest && eest <= desb && eesl <= desr && eesr >= desl){
return false;
}gonorth();}

if(e.which ==40 && object0.style.pixelTop < test.heightmap.height+30 ){//s
if (eest <= desb && eesb >= dest && eesl <= desr && eesr >= desl){
return false;
}gosouth();}

if(e.which ==37 && object0.style.pixelLeft > 24){//w
if (eesl <= desr && eesr >= desl && eesb >= dest && eest <= desb){
return false;
}gowest();}

if(e.which ==39 && object0.style.pixelLeft < (test.widthmap.width)){//e
if (eesr >= desl && eesl <= desr && eesb >= dest && eest <= desb){
return false;
}goeast();}
}

function randommovenme(){
pause = 150
checkme()
nme.style.pixelTop = Math.round(nme.style.pixelTop) - Math.round(1/13*Math.round(nme.style.pixelTop - object0.style.pixelTop)) + Math.round(2-Math.round(Math.random() * 3) % 3) ;
nme.style.pixelLeft = Math.round(nme.style.pixelLeft) - Math.round(1/13*Math.round(nme.style.pixelLeft - object0.style.pixelLeft)) + Math.round(2-Math.round(Math.random() * 3) % 3 );
checkc()
setTimeout("randommovenme()",pause);}
function noaction(){
object0.style.pixelTop = object0.style.pixelTop;
object0.style.pixelLeft = object0.style.pixelLeft;
}

function gonorth(){
test.objimg.src = 'north.gif';
object0.style.pixelTop = object0.style.pixelTop - 5;
test.ex.value = ""+object0.style.pixelTop+""+object0.style.pixelLeft+""
checkc()
}
function gosouth(){

test.objimg.src = 'south.gif';
object0.style.pixelTop = object0.style.pixelTop + 5;
test.ex.value = ""+object0.style.pixelTop+""+object0.style.pixelLeft+""
checkc()
}
function gowest(){
test.objimg.src = 'left.gif';
object0.style.pixelLeft = object0.style.pixelLeft - 5;
test.ex.value = ""+object0.style.pixelTop+""+object0.style.pixelLeft+""
checkc()
}
function goeast(){
test.objimg.src = 'right.gif';
object0.style.pixelLeft = object0.style.pixelLeft + 5;
test.ex.value = ""+object0.style.pixelTop+""+object0.style.pixelLeft+""
checkc()
}

function checkme(){
saveIdx = object0.style.zIndex
object0.style.zIndex = 0;
var currDiv = null;
var saveDiv = currDiv;
if (nme.style.zIndex = saveIdx){

alert("test");
saveDiv = null;
}
return false;
}

function checkc(){
var dest = "Top X:"+object0.style.posTop+"";
var desl = "Left Y:"+object0.style.posLeft+"";
var desb = "Bott. X:"+(object0.style.posTop+test.objimg.height)+"";
var desr = "Rigth Y:"+(object0.style.posLeft+test.objimg.width)+"";
var eest = "Top X:"+nme.style.posTop+"";
var eesl = "Left Y:"+nme.style.posLeft+"";
var eesb = "Bott. X:"+(nme.style.posTop+test.nmeimg.height)+"";
var eesr = "Rigth Y:"+(nme.style.posLeft+test.nmeimg.width)+"";
splitux = Math.round(3/4 * test.objimg.height)
splituy = Math.round(3/4 * test.objimg.width)
var center_ux = object0.style.posTop+splitux;
var center_uy = object0.style.posLeft+splituy;
splitex = Math.round(1/4 * test.nmeimg.height)
splitey = Math.round(1/4 * test.nmeimg.width)
var center_ex = object0.style.posTop+splitex;
var center_ey = object0.style.posLeft+splitey;

//Ref.Jona
var bdy = document.getElementsByTagName("DIV")[0];
var div = document.getElementById("object0");

for(i=0; i<bdy.childNodes.length; i++){
if(bdy.childNodes[i].style.pixelTop <= div.style.pixelTop){
var get_e = bdy.childNodes[i].tagName;
}
}

var theinfo =""+dest+" unit top <br>\n"+
""+desl+" unit left <br>\n"+
""+desb+" unit bottom <br>\n"+
""+desr+" unit right<br> |-> enemie info->|<br>\n"+
" "+eest+" nme top <br>\n"+
" "+eesl+" nme left <br>\n"+
" "+eesb+" nme bottom <br>\n"+
" "+eesr+" nme right <br>\n"+
" detected "+get_e+" element <br>\n"+
" "+center_ux+","+center_uy+"= Unit core X,Y <br>\n"+
" "+center_ex+","+center_ey+"= Enemy core X,Y <br>\n";

tdot.innerHTML = theinfo; //unit top


if (center_ux == center_ex && center_uy == center_ey){
alert("Gotcha!")
}
}


<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<form name=test>
<table width="251" height="221" border=2 align="left" cellpadding="0" cellspacing="0" bordercolor="#666666">
<tr bordercolor="#0033CC" bgcolor="#0033CC">
<td height="10" colspan="3" align=middle> <div align="center"><font color="#CCCCCC" size="1">
</font><font color="#000000" size="1"> </font></div></td>
<td height="10" colspan="4" align=middle><div align="right"><font color="#000000" size="1">
&nbsp; </font></div></td>
</tr>
<tr bordercolor="#CCCCCC" bgcolor="#CCCCCC">
<td height="10" colspan="3" align=middle>&nbsp;</td>
<td height="10" colspan="4" align=middle>&nbsp;</td>
</tr>
<tr bordercolor="#CCCCCC" bgcolor="#CCCCCC">
<td width="13" align=middle bordercolor="#CCCCCC" bgcolor="#CCCCCC">&nbsp;&nbsp;</td>
<td width="134" align=middle bordercolor="#CCCCCC" bgcolor="#00CCFF">
<div id="object0" style="position:absolute; width:16px; height:17px; z-index:2; left: 106px; top: 114px; overflow: visible;"><img name="objimg" src="left.gif" width="25" height="31"></div>
<div id="nme" style="position:absolute; width:47px; height:33px; z-index:1; left: 99px; top: 189px;"><img name="nmeimg" src="funny.gif" width="42" height="31" ></div>

<div id="tdot" style="position:absolute; width:201px; height:232px; z-index:4; left: 600px; top: 90px; background-color: #FF0000; layer-background-color: #FF0000; border: 1px none #000000;"></div>
<div id="guy" style="position:absolute; width:22px; height:30px; z-index:5; left: 250px; top: 212px;"><img src="data/gfx/south.gif" width="24" height="31"></div></td>
<td colspan="5" align=middle bordercolor="#CCCCCC" bgcolor="#CCCCCC"><img name="heightmap" src="data/gfx/black.gif" width="13" height="285">
<div align="center"><font color="#CCCCCC" size="1"> </font></div>
</font></td>
</tr>
<tr bgcolor="#666666">
<td height="20" align=middle bordercolor="#CCCCCC" bgcolor="#CCCCCC"><div align="left"><font color="#CCCCCC" size="1">
</font><font color="#CCCCCC" size="1"> </font></div></td>
<td height="20" align=middle bordercolor="#CCCCCC" bgcolor="#CCCCCC"><img name="widthmap"src="data/gfx/black.gif" width="541" height="8"></td>
<td height="20" colspan="5" align=middle bordercolor="#CCCCCC" bgcolor="#CCCCCC"><font color="#000000" size="1">
<input name="ex" type="text" size=12 maxlength="8">
</font></td>
</tr>
</table>
</form>
</body>
</html>
Shampie
10-25-2003, 10:28 PM
this part will move the layer around.
if(e.which ==38 && object0.style.pixelTop > 65){//n
if(eesb >= dest && eest <= desb && eesl <= desr && eesr >= desl){
return false;
}gonorth();}

if(e.which ==40 && object0.style.pixelTop < test.heightmap.height+30 ){//s
if (eest <= desb && eesb >= dest && eesl <= desr && eesr >= desl){
return false;
}gosouth();}

if(e.which ==37 && object0.style.pixelLeft > 24){//w
if (eesl <= desr && eesr >= desl && eesb >= dest && eest <= desb){
return false;
}gowest();}

if(e.which ==39 && object0.style.pixelLeft < (test.widthmap.width)){//e
if (eesr >= desl && eesl <= desr && eesb >= dest && eest <= desb){
return false;
}goeast();}
}

//....

//....
function gonorth(){
test.objimg.src = 'north.gif';
object0.style.pixelTop = object0.style.pixelTop - 5;
test.ex.value = ""+object0.style.pixelTop+""+object0.style.pixelLeft+""
checkc()
}
function gosouth(){

test.objimg.src = 'south.gif';
object0.style.pixelTop = object0.style.pixelTop + 5;
test.ex.value = ""+object0.style.pixelTop+""+object0.style.pixelLeft+""
checkc()
}
function gowest(){
test.objimg.src = 'left.gif';
object0.style.pixelLeft = object0.style.pixelLeft - 5;
test.ex.value = ""+object0.style.pixelTop+""+object0.style.pixelLeft+""
checkc()
}
function goeast(){
test.objimg.src = 'right.gif';
object0.style.pixelLeft = object0.style.pixelLeft + 5;
test.ex.value = ""+object0.style.pixelTop+""+object0.style.pixelLeft+""
checkc()
}
Jona
10-26-2003, 07:39 PM
Completely remove the checkme() function and all references and pointers to it...

[J]ona
Shampie
10-27-2003, 01:13 AM
Consider that part already done (seemed like useless part into my script for the time beying).

I have worked out the block code and it is working!(wow)