title: Change Multiple Inline Styles using Javascripts OnMouse Over, OnMouse Out, Enter Key Change
body: <p>Can someone help point me in the direction of changing multiple inline styles using javascript suchas: OnMouseOver, OnMouseOut, and then a enter key change?</p>
  
  <p>I have 2 onclick mouse over / out things that need to happen and then an after Enter key pushed state that needs to change the graphic out to a loading graphic?</p>
  
  <p>Before Mouse Over State:</p>
  
  <pre><code>src="images/transparent_100x100.png" style="background:url(/images/image_giblets_20x.png) no-repeat scroll right -414px transparent"
  </code></pre>
  
  <p>Mouse Over State - Change right to left:</p>
  
  <pre><code>src="images/transparent_100x100.png" style="background:url(/images/image_giblets_20x.png) no-repeat scroll left -414px transparent"
  </code></pre>
  
  <p>Once clicked to begin search - change the image to this and remove [style details]:</p>
  
  <pre><code>src="images/loading2.gif"
  </code></pre>
  
  <p>Here is what I tried so far for just the OnMouseOver/Out part.</p>
  
  <pre><code>&lt;img id="nb_search_magglass" alt="Search" border="0"
  onmouseover="document.getElementById('nb_search_magglass').style.background: url(/images/image_giblets_20x.png) no-repeat scroll left -414px transparent;"
  
  onmouseout="document.getElementById('nb_search_magglass').style=.background: url(/images/image_giblets_20x.png) no-repeat scroll right -414px transparent;"
  
  style="background:url(/images/image_giblets_20x.png) no-repeat scroll right -414px transparent" src="images/transparent_100x100.png" width="23px" height="23px" /&gt;
  </code></pre>