combine spriterollover.js with spritesequencer.js question?

combine spriterollover.js with spritesequencer.js question?

hi all - i am trying to workout how to combine the two methods of animating a sprite sheet using two different scripts...

here is what i would like to do:
on rollover to the sprite it plays and reverses when rolled out...
but i also want the same spritesheet to animate when a button/link is rolled over too...

the attached scripts do both these things - but not as a combined thing - one will play and reverse on rollover of the sprite - but nothing when you try it with the button/link. and vice versa when the button/link works, rolling over the sprite itself doesn't animate!

below are the two versions - the first is the one that works with the buttons - and the second is the rollover version - how can i combine the two?

here's hoping

  1. <!DOCTYPE html>
    <html lang="en" >
    <head>
      <meta charset="UTF-8" />
      <title>Sprite Rollover</title>

      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
      <script src="../jquery.spriteSequencer.js"></script>
      <script src="../jquery.spriteRollover.js"></script>

      <script type="text/javascript" charset="utf-8">
       
        $(document).ready(function() {

          $('.sprite').spriteRollover({
            spriteSheet: "sprite_sheet.png",
            columns: 30,
            totalFrames: 30,
            fps: 60,
            width: 300,
            height: 200
          })

        });
       
        $(document).ready(function() {

          $('#sprite').spriteSequencer({
            spriteSheet: "sprite_sheet.png",
            columns: 30,
            totalFrames: 30,
            fps: 60,
            width: 300,
            height: 200,
            onTick: currentFrame
          })

          $('#play').click(function() {
            $('#sprite').spriteSequencer('play')
          });     
        });
       
        function currentFrame (frame) {
          $('#current-frame').html("Current frame: "+ frame)
        }
     
      </script>
    </head>
    <body>

        <div id="sprite" style="width:300px;height:200px;"></div>
      <br />
      <div id="current-frame">Current frame: 0</div>
      <a href="#" id="play">Play</a><br />
      <a href="#" id="pause">Pause</a><br />
      <a href="#" id="gotostop">Go to and stop at frame 20</a><br />
      <a href="#" id="gotoplay">Go to and play at frame 10</a><br />
      <a href="#" id="playto">Play to frame 5</a><br />
    </body>
    </html>


























































  2. <!DOCTYPE html>
    <html lang="en" >
    <head>
      <meta charset="UTF-8" />
      <title>Sprite Rollover</title>

      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
      <script src="../jquery.spriteSequencer.js"></script>
      <script src="../jquery.spriteRollover.js"></script>

      <script type="text/javascript" charset="utf-8">
       
        $(document).ready(function() {

          $('.sprite').spriteRollover({
            spriteSheet: "sprite_sheet.png",
            columns: 30,
            totalFrames: 30,
            fps: 60,
            width: 300,
            height: 200
          })

        });
       
      </script>
     
    </head>
    <body>

      <div class="sprite" style="width:300px;height:200px;"></div>

    </body>
    </html>