title: Set background position of image with Javascript
body: <p>When a user clicks a link which has an image as a background, I need an onClick event that changes the background position of it. This is the link:</p>
  
  <pre><code>&lt;a href="#" id="favorite_1" class="favorite" onClick="favoriteBusiness(1);"&gt;Favorite&lt;/a&gt;
  </code></pre>
  
  <p>It's already set in css and there are two states, regular and hover, with hover being shifted by 12px.</p>
  
  <pre><code>a.favorite {
      width: 15px;
      height: 12px;
      background: url(img/icon-fav.png) no-repeat;
      overflow: hidden;
      position: absolute;
      top: 0;
      right: 0;
      text-indent: -300px;
  }
  
  a.favorite:hover {
      background-position: 0 -12px
  }
  </code></pre>
  
  <p>When I click the image once, I need the background position to be set the same as the hover state.</p>
  
  <p>I'm doing that like this, and it works:</p>
  
  <pre><code>document.getElementById("favorite_1").style.backgroundPosition = "0 -12px";
  </code></pre>
  
  <p>But when the link is clicked again, I need it to switch back to the normal background position and I can't get that to work. This is the function I'm trying but it only works for moving the background to "0 -12px", not for moving it back to its original position.</p>
  
  <pre><code>function favoriteBusiness(id){
  
     if(document.getElementById("favorite_1").style.backgroundPosition == "0 -12px")
      document.getElementById("favorite_1").style.backgroundPosition = "";
     else
      document.getElementById("favorite_1").style.backgroundPosition = "0 -12px";
  
  }
  </code></pre>
  
  <p>Can someone point me in the right direction here?</p>