Where is the best place to create a sprite ready for animation?

Question

I am working on a site and I have animations using:

spriteOnHover (Sprite on Hover) – jQuery plugin

My issue is that my animation stops and I have a feeling that is it the way the PNG is set up.

As you can see from these the link:

http://www.benjaminedwardswebdesign.co.uk/testsites/moveplease/ <= my animation is the beaker!

it is not animating correctly!

Do you think it is my sprite? As there is a warning on the plugin site that says this

"Attention: The spriteOnHover jquery plugin will autodetect how many frames your sprite has, based on the orientation parameter, but it’s crucial that every frame has the exactly same size as the others. For now, multi-line sprites are not supported."

Hope someone can help,

Many thanks,

Ben.

Answer 1

Thanks for this, I am now just using a gif and a static png for hover state: see my fiddle http://jsfiddle.net/P4aZC/

<img id="beaker" src="http://benjaminedwardswebdesign.co.uk/testimg/BeakerStart.png" />  

    $(document).ready(function()
{
    $("#beaker").hover(
        function()
        {
            $(this).attr("src", "http://benjaminedwardswebdesign.co.uk/testimg/BeakerAni.gif");
        },
        function()
        {
            $(this).attr("src", "http://benjaminedwardswebdesign.co.uk/testimg/BeakerStart.png");
        }                         
    );                  
});

Answer 2

Loading your moveplease page yeilds a 404 error:

Failed to load resource: the server responded with a status of 404 (Not Found) 

for http://www.benjaminedwardswebdesign.co.uk/testsites/moveplease/images/beakerFinal.png

For your other page you are using: http://www.benjaminedwardswebdesign.co.uk/testsites/moveplease2/images/beaker.png (note beaker.png versus beakerFinal.png