I am building a Star Wars fansite.

My navigation menu will be star wars lightsabers.

I am planning to make (when the cursor is over the lightsaber) for the actual light sword to e out. When the cursor leaves the lightsaber, it goes back down.

I have a gif that does that, but how to make it unactive then active when cursor is hovered over??

If the idea above doesn't sound correct, how would you suggest I do it?

I am building a Star Wars fansite.

My navigation menu will be star wars lightsabers.

I am planning to make (when the cursor is over the lightsaber) for the actual light sword to e out. When the cursor leaves the lightsaber, it goes back down.

I have a gif that does that, but how to make it unactive then active when cursor is hovered over??

If the idea above doesn't sound correct, how would you suggest I do it?

• javascript
• jquery
• html
• css
• animated-gif

5 Answers 5

No, you can't control the animation of the images.

You would need two versions of each images, one that is animated (.gif), and one that's not(.gif/.png/.jpg/etc).

On hover you can easily change from one image to another.

Example:

$(function(){
  $('img').each(function(e){
    var src = $(e).attr('src');
    $(e).hover(function(){
      $(this).attr('src', src.replace('nonanimated.gif', 'animated.gif'));
    }, function(){
      $(this).attr('src', src);
    });
  });
});

Reference link

like Parag Meshram said, but no need to do it with jQuery or JavaScript:

.foo {
  background: url(still.png) no-repeat 0 0;
}
.foo:hover {
  background-image: url(animation.gif);
}

It might be a overkill, but I think you can control the GIF with WebGL.

Here is some GIF manipulation, it's not what you ask for, but maybe some inspiration for doing something own http://www.clicktorelease./code/gif/

Your best bet is to actually split the handle and the sword into two different graphics to then animate the sword in with Javascript (as background property). This way you wouldn't have the restrictions of the GIF file format but still a lot smaller files. You'll need to create a div the same size as the sword and set it as background, then set the background-position-x to -100% and animate it back in on hover, you can use jQuery for that:

$('.sword').on('hover', function(event){
$(this).animate({
        'background-position-x': '0%',
    }, 100, 'linear');
});
$('.sword').off('hover', function(event){
$(this).animate({
        'background-position-x': '-100%',
    }, 100, 'linear');
});

(I wrote this off the top of my head, check the jQuery docs if this doesn't work)

I had a similar situation and found a pretty simple solution. I'm pretty new to JQuery, so I'm not sure if this is in line with best practices, but it works.

I've used a static image (.png for transparency, in my case) and switched out the src attribute to point to the animated .gif on mouseenter and back to the .png on mouseleave. For your lightsaber to go from hilt alone to powering up I would do it a bit differently than usual. Try taking a frame from the .gif in Photoshop and making it into a static image using "save for web and devices". I remend .png. In your HTML markup use this static image of the hilt for your src of the image, also be sure to give it an ID, such as saber for this example.

Now onto the jquery script. I link it in a separate file. For one saber it should look something like this:

$(document).ready(function()
{


$("#saber").mouseenter(
    function()
    {
        $(this).attr("src", "img/stillframehilt.png");
    },
    function()
    {
        $(this).attr("src", "img/saberpowerup.gif");
    });
$("#saber").mouseleave(
    function()
    {
        $(this).attr("src", "img/saberpowerup.gif");
    },
    function()
    {
        $(this).attr("src", "img/stillframehilt.png");
    });

    });

Notice the on mouseleave I had it switch src to "img/saberpowerdown.gif". I think that rather than have the saber revert back instantaneously to the hilt in its dormant state (which any Star Wars geek[myself included] would wince at) it would look better to have a .gif that is essentially the reverse of the saber turning on. This can be achieved by reversing the order of the animation frames(ensure that visible layers are correct). For good measure I would make sure when to have it not loop either .gif's as well as add a few extra frames of the hilt alone when the power down is finished to ensure it remains off.

Also, it might be beneficial to add a .click to the saber to change the src to the power down, or even a different animation, but that is just extra flair. For each additional lightsaber use the same code, just changing the id to reference each in a logical way such as by color.

Again, I can't claim this to be in line with best practices as far as jquery goes (I'm but a padawan) but this method worked when I needed to activate a .gif on mouseenter and back on .mouseleave . May The Force be with you.