title: Change image width/height with Javascript
body: <p>New to Javascript here,
  I've been trying to change the size of an image (width/height) in an HTML page whenever a mouseover occurs, however it doesn't seem to work if the styles are set in the CSS page, which is a huge problem for me since I need to use the position property to set the image location.</p>
  
  <p>Here's the code.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;a  href="#"  onMouseOver="big()" onMouseOut="small()"&gt;
  &lt;img src="img1.png" name="image1" id="mw"&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#mw
  {
      position:absolute;
      left:15%;
      top:35%;
      width:146px;
      height:97px;
  }
  </code></pre>
  
  <p>jS:</p>
  
  <pre><code>function big()
  {
      document.getElementsByName("image1").style.width=183;
      document.getElementsByName("image1").style.height=121;
  }
  function small()
  {
      document.getElementsByName("image1").style.width=146;
      document.getElementsByName("image1").style.height=97;
  }
  </code></pre>