title: How to switch the images on hover using flip plugin
body: <p>I wonder how to use this <a href="http://lab.smashup.it/flip/" rel="nofollow">flip plugin</a> to make 3d rollover transition compatible with IE9 (clients request). I can make it work but I have two pngs and I want on mouse hover to switch from rollover1.png to rollover2.png. So far it does rollover1.png</p>
  
  <pre><code>  &lt;!DOCTYPE html&gt;
      &lt;html&gt;
      &lt;style type="text/css"&gt;
      .flipbox {
      width: 108px;
      height: 108px;
      line-height: 108px;
      background-color: #ff9000;
      font-family: 'ChunkFive Regular', Tahoma, Helvetica;
      font-size: 2.5em;
      color: #ffffff;
      text-align: center;
      }   
  
      &lt;/style&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"&gt;&lt;/script&gt;
      &lt;script src="jquery.flip.min.js"&gt;&lt;/script&gt;
  
      &lt;body&gt;
  
      &lt;div class="flipbox"&gt;
          &lt;img src="rollover1.png" alt="Unlock Your Potential"/&gt;
          &lt;img src="rollover2.png" alt="jjjj"/&gt;
      &lt;/div&gt;
  
      &lt;div class="flipPad"&gt;
  
      &lt;a href="#" class="top" rel="bt" rev="#B0EB17" title="Ohhh yeah!"&gt;
  
      &lt;/a&gt;
      &lt;/div&gt;
  
      &lt;/body&gt;
      &lt;script&gt;
  
      $(function(){
          $('.flipbox').hover(function(){
          $('.flipbox').flip({
              direction:'tb'
              });
          });
      });
  
      &lt;/script&gt;
      &lt;/html&gt;
  </code></pre>