By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,374 Members | 1,782 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,374 IT Pros & Developers. It's quick & easy.

Image does not move to set location

P: 17
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.
Expand|Select|Wrap|Line Numbers
  1. // Part of larger function...
  2. var numofscats = (Math.floor(5*Math.random())) + 3; // 3-8 weapons in-game
  3.     for (var i = 0; i < numofscats; i++) {
  4.         var weaponindex = (Math.floor(numofweapons*Math.random()));
  5.         var weaponx = (Math.floor(map_l*Math.random()))+map_x;
  6.         var weapony = (Math.floor(map_h*Math.random()))+map_y;
  7.         weapons_ingame[i] = new inGameWeapon(weaponindex, weaponx, weapony);
  8.         if (weapons_ingame[i]) {
  9.             alert("Weapon "+i+" exists at ("+weaponx+","+weapony+")");
  10.         }
  11.         var weapon = weapons[weaponindex];
  12.         var gamearea = document.getElementById("gamearea");
  13.         if (weapon.clss == 0 || weapon.clss == 1) {
  14.             gamearea.innerHTML += "<img src=\"cheddar/w_light.png\" id=\"weapon"+weaponindex+"\">";
  15.         } else if (weapon.clss == 5) {
  16.             gamearea.innerHTML += "<img src=\"cheddar/w_heavy.png\" id=\"weapon"+weaponindex+"\">";
  17.         } else {
  18.             gamearea.innerHTML += "<img src=\"cheddar/w_medium.png\" id=\"weapon"+weaponindex+"\">";
  19.         }
  20.         document.getElementById("weapon"+weaponindex).setAttribute("offsetTop", weapony+"px");
  21.         document.getElementById("weapon"+weaponindex).setAttribute("offsetLeft", weaponx+"px");
  22.  
Jun 13 '08 #1
Share this Question
Share on Google+
5 Replies


acoder
Expert Mod 15k+
P: 16,027
Set style.top/left instead.
Jun 14 '08 #2

P: 17
Revised it to this (complete with style.top/style.left), but without progress... it still doesn't seem to work.
Expand|Select|Wrap|Line Numbers
  1.     var numofscats = (Math.floor(5*Math.random())) + 3; // 3-8 weapons in-game
  2.     for (var i = 0; i < numofscats; i++) {
  3.         var weaponindex = (Math.floor(numofweapons*Math.random()));
  4.         var weaponx = (Math.floor(map_l*Math.random()))+map_x;
  5.         var weapony = (Math.floor(map_h*Math.random()))+map_y;
  6.         weapons_ingame[i] = new inGameWeapon(weaponindex, weaponx, weapony);
  7.         //if (weapons_ingame[i]) {
  8.         //    alert("Weapon "+i+" exists at ("+weaponx+","+weapony+")");
  9.         //}
  10.         var weapon = weapons[weaponindex];
  11.         var weaponimg = document.getElementById("weapon"+(i+1));
  12.         if (weapon.clss == 2 || weapon.clss == 3 || weapon.clss == 4) {
  13.             weaponimg.src = "cheddar/w_medium.png";
  14.         } else if (weapon.clss == 5) {
  15.             weaponimg.src = "cheddar/w_heavy.png";
  16.         }
  17.  
  18.         weaponimg.style.top = weapony+"px";
  19.         weaponimg.style.left = weaponx+"px";
  20.         weaponimg.style.display = "";
  21.     }
Jun 16 '08 #3

acoder
Expert Mod 15k+
P: 16,027
Can you show the rest of your code or a link to a test page?
Jun 16 '08 #4

acoder
Expert Mod 15k+
P: 16,027
You may need to position the images absolutely.
Jun 19 '08 #6

Post your reply

Sign in to post your reply or Sign up for a free account.