[SOLVED] Javascript and DIV problem

[coderage]

Hi

I have (1)

 

<DIV id="mainbox" style="overflow:hidden; border:1px solid red; position:absolute; left:100; top:100; height:400px; width:400px;">

  <img id="101" src="1.jpg" style="height:100px; width:100px;" alt="1"></img>
  <img id="102" src="2.jpg" style="height:100px; width:100px;" alt="2"></img>

</DIV

 

(2) I can move these two images in the DIV using Javascript.

 

(3)But when i add a new image using document.createElement("IMG") and add to this DIV using

 

function addTail()
{
tailCount++ // now 3
var d=document.getElementById('mainbox');
var newTile=document.createElement("IMG");
newTail.setAttribute('src','tiles/3.jpg');
newTail.setAttribute('id',tailCount);
newTail.setAttribute('height',256);
newTail.setAttribute('width',256);
newTail.style.left=nl[tailCount-1];
newTile.style.top=0;
d.appendChild(newTail);
}

the new image is added in the mainbox DIV but, not accessible. i want it to get attached to the end of the existing 2 boxes (like snake game)

 

but instead the new imaged keeps lying on in the background inside the DIV and the First two images move inside the DIV on top of the new one.

 

Sombody plz tell me how to fix this.

thanks

[ToonMariner]

is there any conflict in how you declare the images widths and heights????

 

tyr to be consistent - that shoudl cut down the potential for error...

 

have you any css declarations for any img tags within this div? are they positioned in any way and if so what are the z-indexes doing?

 

[coderage]

No there are no Z-indexes declared. and  i tested the image attribute declaration too.. it has no effect

im stumped !

[coderage]

This is the complete BODY tag of the page. and i installed the DOM inspector, my initial install didint have it , thanks for the idea.

When i inspected it shows the new images being added to the "mover" DIV. But i need to keep that up to be able to move my images with mouse.

 

confused !

 

<div id="mainbox" style="overflow:hidden; border:1px solid red; position:absolute; left:256; top:100; height:512px; width:768px;"> 
  <img id="101" src="1.jpg" style="height:256px; width:256px;" alt="1"></img> 
  <img id="102" src="2.jpg" style="height:256px; width:256px;" alt="2"></img> 

  <div id="mover" style="overflow:hidden; border:0px solid blue; position:absolute; left:0; top:0; height:512px; width:768px;" 
	 	onMouseDown="mainboxMouseDown(event);" onMouseUp="mainboxMouseUp(event);"   onMouseMove="mainboxMouseMove(event);">
  </div> 

[coderage]

I figured it out. This needed to be done in the javascript function

 

function addTail()
{
tailCount++ // now 3
var d=document.getElementById('mainbox');

var d2=document.getElementById('mover');   ' ADDITION

var newTile=document.createElement("IMG");

newTail.style.position='absolute';                ' ADDITION

newTail.setAttribute('src','tiles/3.jpg');
newTail.setAttribute('id',tailCount);
newTail.setAttribute('height',256);
newTail.setAttribute('width',256);

newTail.style.left=nl[tailCount-1];
newTile.style.top=0;
d.appendChild(newTail);         REPLACING this line with

d.insertBefore(newTail, d2);
}

 

 

Thanks for the DOM suggestion