title: Using JavaScript so that when an image is clicked another element's position is changed
body: <p>I am new at JavaScript and I am trying to create an event that when an  image is clicked on, the position of another image is changed.  I have an image hidden off screen to the left and I have a table of pictures on the center of the page.  I am trying to make it so that when an image in the table is clicked the hidden image slides out from the left.  I am trying to learn JavaScript and don't want to use JQuery yet.  Thank you in advanced for your help.</p>
  
  <p>Here is the HTML and the CSS and the JavaScript follows:</p>
  
  <p>HTML for the table:</p>
  
  <pre><code>  &lt;table&gt;
     &lt;tbody&gt;
        &lt;tr&gt;
        &lt;td&gt;&lt;img onclick="sleepFunction()" src="01.jpg" height="180" width="120"&gt;&lt;/td&gt;
        &lt;td&gt;&lt;img src="02.jpg" height="180" width="120"/&gt;&lt;/td&gt;
        &lt;td&gt;&lt;img src="03.jpg" height="180" width="290"/&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
        &lt;td&gt;&lt;img src="04.jpg" height="180" width="120"/&gt;&lt;/td&gt;
        &lt;td&gt;&lt;img src="05.jpg" height="180" width="120"/&gt;&lt;/td&gt;
        &lt;td&gt;&lt;img src="06.jpg" height="180" width="290"/&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
        &lt;td&gt;&lt;img src="07.jpg" height="180" width="120"/&gt;&lt;/td&gt;
        &lt;td&gt;&lt;img src="08.jpg" height="180" width="120"/&gt;&lt;/td&gt;
        &lt;td&gt;&lt;img src="09.jpg" height="180" width="290"/&gt;&lt;/td&gt;
        &lt;/tr&gt;
     &lt;/tbody&gt;
  </code></pre>
  
  <p>HTML for the image:</p>
  
  <pre><code>&lt;div class = "sleepImage"&gt;
  &lt;img src = "sleeping.jpg" width= "490"/&gt;
     &lt;/div&gt;
  </code></pre>
  
  <p>Here is the CSS:</p>
  
  <pre><code> .sleepImage {
  float: right;
  position: absolute;
  top: 108px;
  left: -600px;
  }
  </code></pre>
  
  <p>And here is the JavaScript Code:</p>
  
  <pre><code>function sleepFunction() {
  document.getElementsByClassName("sleepImage").style.left = "300px";
  }
  </code></pre>