Image does not move to set location

[kidko]

I'm just trying to move a few images around a page... The images already exist, and the following function simply assigns them an ID and sets their offsetTop/offsetLeft attributes. This works for other images, but these refuse to cooperate. The alert halfway in is an attempt to find the problem, but it always returns the right values. Once the function finishes, however, they're always totally off, and just line up horizontally at the top-left corner of the page. Note that all variables that should be defined elsewhere, are. No loose ends, as far as I can tell.

// Part of larger function...
var numofscats = (Math.floor(5*Math.random())) + 3; // 3-8 weapons in-game
	for (var i = 0; i < numofscats; i++) {
		var weaponindex = (Math.floor(numofweapons*Math.random()));
		var weaponx = (Math.floor(map_l*Math.random()))+map_x;
		var weapony = (Math.floor(map_h*Math.random()))+map_y;
		weapons_ingame[i] = new inGameWeapon(weaponindex, weaponx, weapony);
		if (weapons_ingame[i]) {
			alert("Weapon "+i+" exists at ("+weaponx+","+weapony+")");
		}
		var weapon = weapons[weaponindex];
		var gamearea = document.getElementById("gamearea");
		if (weapon.clss == 0 || weapon.clss == 1) {
			gamearea.innerHTML += "<img src=\"cheddar/w_light.png\" id=\"weapon"+weaponindex+"\">";
		} else if (weapon.clss == 5) {
			gamearea.innerHTML += "<img src=\"cheddar/w_heavy.png\" id=\"weapon"+weaponindex+"\">";
		} else {
			gamearea.innerHTML += "<img src=\"cheddar/w_medium.png\" id=\"weapon"+weaponindex+"\">";
		}
		document.getElementById("weapon"+weaponindex).setAttribute("offsetTop", weapony+"px");
		document.getElementById("weapon"+weaponindex).setAttribute("offsetLeft", weaponx+"px");

[acoder]

Set style.top/left instead.

[kidko]

Revised it to this (complete with style.top/style.left), but without progress... it still doesn't seem to work.

	var numofscats = (Math.floor(5*Math.random())) + 3; // 3-8 weapons in-game
	for (var i = 0; i < numofscats; i++) {
		var weaponindex = (Math.floor(numofweapons*Math.random()));
		var weaponx = (Math.floor(map_l*Math.random()))+map_x;
		var weapony = (Math.floor(map_h*Math.random()))+map_y;
		weapons_ingame[i] = new inGameWeapon(weaponindex, weaponx, weapony);
		//if (weapons_ingame[i]) {
		//	alert("Weapon "+i+" exists at ("+weaponx+","+weapony+")");
		//}
		var weapon = weapons[weaponindex];
		var weaponimg = document.getElementById("weapon"+(i+1));
		if (weapon.clss == 2 || weapon.clss == 3 || weapon.clss == 4) {
			weaponimg.src = "cheddar/w_medium.png";
		} else if (weapon.clss == 5) {
			weaponimg.src = "cheddar/w_heavy.png";
		}

		weaponimg.style.top = weapony+"px";
		weaponimg.style.left = weaponx+"px";
		weaponimg.style.display = "";
	}

[acoder]

Can you show the rest of your code or a link to a test page?

[kidko]

Sure.

http://kidkonia.com/projects/cheddar.html

[acoder]

You may need to position the images absolutely.