title: CSS Sprite Image Class Change
body: <p>I'm using CSS sprites for a number of images on my site. I want to implement my up arrow and down arrows as sprites. </p>
  
  <p>The arrows share one img tag on the website and I use javascript to swap in the proper image.</p>
  
  <p>Let's say I'm changing a down arrow in the image to an up arrow. In the CSS, the down arrow is cssDownArrow and the up arrow is cssUpArrow.</p>
  
  <p>The strategy I chose was to go to where I had</p>
  
  <pre><code>menuArrow.src = "/website/images/upArrow.gif";
  </code></pre>
  
  <p>and change it to this (cssUpArrow is the CSS class for the sprite and clear.gif is the placeholder image I"m using for the image tags where the sprites will be swapped in):</p>
  
  <pre><code>menuArrow.src = "/website/images/clear.gif";
  menuArrow.class = "cssUpArrow";
  </code></pre>
  
  <p>However, when I do this, it doesn't show the correct image from the sprite, but keeps the one that was there before.</p>
  
  <p>To some degree I understand why this is happening, but am not sure as to the best solution? Any help? Thanks!</p>