title: Change text using onmouseover on an image?
body: <p>I'd like the text to change depending on which image the user is hovering over. I thought I had the right idea, but the code doesn't work. </p>
  
  <p><a href="http://jsfiddle.net/6V2TL/" rel="nofollow">http://jsfiddle.net/6V2TL/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;p id="test"&gt;
  some text 1
  &lt;/p&gt;
  &lt;div id="image1" onmouseover="change1()"&gt;
      &lt;img src="http://www.helpinghomelesscats.com/images/cat1.jpg"&gt;
  &lt;/div&gt;
  &lt;div id="image2" onmouseover="change2()"&gt;
      &lt;img src="http://cvcl.mit.edu/hybrid/cat2.jpg"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>function change1() {
       document.getElementById("test").innerHTML = "this is a cute cat";   
  }
  function change2() {
       document.getElementById("test").innerHTML = "this is a cuter cat";   
  }    ​
  </code></pre>
  
  <p>Thanks</p>