title: Using Javascript to shift location of divs w/ Up, Down, Left and Right buttons
body: <p>I'm just getting into jquery and javascript but, I'm slamming my head against a wall trying to figure this one out. I've tried using .css and .animate commands, but I think I'm doing them improperly, or i'm failing to differentiate the variables.</p>
  
  <p>In the End there will be DIV's for
  body, eyes, face, teeth, etc. Each with their own id.</p>
  
  <p>There will be at least 20 in each 'category'</p>
  
  <p>The end goal is to have a sort of 'creature creator' whereby you have a series of eyes, teeth, etc. Each of them being a transparent png, with z-index if necessary while layering.</p>
  
  <p>Currently I'm using the following to target/replace the div imagery:</p>
  
  <pre><code>function showimagename(){document.getElementById('centraldiv').innerHTML="&lt;a href='#'&gt;
  &lt;img src='images/imagethumb2.png' border='0'&gt;&lt;/a&gt;";}
  </code></pre>
  
  <p>and that part works flawlessly.</p>
  
  <p>Instead of a previous drag-and-drop method (which had limited compatibility),
  I'm attempting to add a set of up, down, left, right arrows which when clicked will shift that particularly named div say 5 pixels. After the user is happy with their choices, I was planning to use canvas to capture the image (and then maybe share? send? implement further?) I've removed any actual images to keep it simple.</p>
  
  <p>Would this work in flash? Of course!
  I just have no interest in coding in flash,
  as i'm going for as much compatibility as possible.</p>
  
  <p>THE PROBLEM:</p>
  
  <p>I have 4 'arrows' which I can designate to shift up, down, left, or right.
  But for some reason I can only do either up/down or left/right, and furthermore
  when I add a second set for another div (say the creature's feet) it only respects the last iteration of the script.</p>
  
  <p>I apologize if my code is inefficient, sloppy, or otherwise insults your senses, im new :D.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;&lt;head&gt;
  &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  var imgObj =null;function init()
  {imgObj = document.getElementById('centraldiv');
  imgObj.style.position= 'relative'; 
  imgObj.style.top = '0px';}function moveDown()
  {imgObj.style.top = parseInt(imgObj.style.top)+5+'px';}
  window.onload =init;
  
  var imgObj =null;function init()
  {imgObj = document.getElementById('centraldiv');
  imgObj.style.position= 'relative'; 
  imgObj.style.top = '0px';}function moveUp()
  {imgObj.style.top = parseInt(imgObj.style.top)-5+'px';}
  window.onload =init;
  &lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  var imgObj =null;function init()
  {imgObj = document.getElementById('centraldiv');
  imgObj.style.position= 'relative'; 
  imgObj.style.left = '0px';}function moveRight()
  {imgObj.style.left = parseInt(imgObj.style.left)+5+'px';}
  window.onload =init;
  
  var imgObj =null;function init()
  {imgObj = document.getElementById('centraldiv');
  imgObj.style.position= 'relative'; 
  imgObj.style.left = '0px';}function moveLeft()
  {imgObj.style.left = parseInt(imgObj.style.left)-5+'px';}
  window.onload =init;
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="centraldiv"&gt;&lt;img height="50" width="50" src="//upload.wikimedia.org/wikipedia/commons/6/63/Wikipedia- logo.png"&gt;&lt;/div&gt;&lt;P&gt;
  &lt;a href="#" onclick="moveLeft()"&gt;LEFT&lt;/A&gt;
  &lt;a href="#" onclick="moveRight()"&gt;RIGHT&lt;/A&gt;
  &lt;a href="#" onclick="moveDown()"&gt;DOWN&lt;/A&gt;
  &lt;a href="#" onclick="moveUp()"&gt;UP&lt;/A&gt;
  &lt;/body&gt;&lt;/html&gt;
  </code></pre>
  
  <p>please help, i'm irritating my coding buddies!</p>