Navigation buttons - gif hover animation?

Edit: So, essentially what I need is a CSS script that would restart a gif on mouse hover.

Or option 2: re-download a gif image on mouse hover


So, I made a set of some buttons and I am just wondering how to implement them as navigation buttons. 
When the mouse would not hover over the button it should be on frame 1, or I could just use a static image. But when the mouse would hover over the button it should play the animation sequence once. (Ideally, the animation would start from frame one everytime you hover over the button)


Any idea on how to do that? Help would be greatly appreciated.

Example of the animation button:

Far as i know i dont think you can have animated navigation buttons, but if then i think it would must be in CSS

Hi

It's your GIF image that's the problem . Can you screenshot the properties it had once you transported it and what type of editing program did you use?

The interlace should be checked and it should be set on infinite loop. It should also be starting immediately .

Edit: Never mind that theory. The GIF works perfectly over my test forum. Can you please give your forum link and make sure that the buttons are set already for it?

Regards,
Pizza Boi

Pizza Boi wrote:Edit: Never mind that theory. The GIF works perfectly over my test forum. Can you please give your forum link and make sure that the buttons are set already for it?

Thanks for looking at this. Forum link: http://greenchip.playogame.com/forum

1. What do you mean "set"? Set the images where, how? Under pics management or trough the css?

2. Would this tutorial work for these? https://help.forumotion.com/t119328-blue-hover-navbar

I want the animation sequence only play once trough though, even if you don't hover over it any more, and even if you still hover over the same button. The animation should play once trough no matter what. Maybe I shouldn't use an infinite loop?

I uploaded one button here: (http://greenchip.playogame.com/forum) using the guide mentioned above and it works. However, the animation does not play once trough. It either stops once you stop hovering or continues to play forever if you keep hovering over it.

Anyone got a solution? Please?

Klemen wrote:

Pizza Boi wrote:Edit: Never mind that theory. The GIF works perfectly over my test forum. Can you please give your forum link and make sure that the buttons are set already for it?

Thanks for looking at this. Forum link: http://greenchip.playogame.com/forum

1. What do you mean "set"? Set the images where, how? Under pics management or trough the css?

2. Would this tutorial work for these? https://help.forumotion.com/t119328-blue-hover-navbar

I want the animation sequence only play once trough though, even if you don't hover over it any more, and even if you still hover over the same button. The animation should play once trough no matter what. Maybe I shouldn't use an infinite loop?

Klemen wrote:I uploaded one button here: (http://greenchip.playogame.com/forum) using the guide mentioned above and it works. However, the animation does not play once trough. It either stops once you stop hovering or continues to play forever if you keep hovering over it.

Anyone got a solution? Please?

Hi

#1 Under pics management
#2 It would work

http://tfpb.forumtl.com/ Hi, it plays with mine perfectly.

I removed the repeat and 0,0 option in it so try this instead:

Code:

    #i_icon_mini_index{width:92px;height:34px;background:url(IMAGE URL HERE);}
        #i_icon_mini_index:hover{background:url(IMAGE URL HERE);}

        #i_icon_mini_calendar{width:89px;height:34px;background:url(IMAGE URL HERE);}
        #i_icon_mini_calendar:hover{background:url(IMAGE URL HERE);}

        #i_icon_mini_gallery{width:89px;height:34px;background:url(IMAGE URL HERE);}
        #i_icon_mini_gallery:hover{background:url(IMAGE URL HERE);}

        #i_icon_mini_faq{width:89px;height:34px;background:url(IMAGE URL HERE);}
        #i_icon_mini_faq:hover{background:url(IMAGE URL HERE);}

        #i_icon_mini_search{width:89px;height:34px;background:url(IMAGE URL HERE);}
        #i_icon_mini_search:hover{background:url(IMAGE URL HERE);}

        #i_icon_mini_members{width:89px;height:34px;background:url(IMAGE URL HERE);}
        #i_icon_mini_members:hover{background:url(IMAGE URL HERE);}

        #i_icon_mini_groups{width:89px;height:34px;background:url(IMAGE URL HERE);}
        #i_icon_mini_groups:hover{background:url(IMAGE URL HERE);}

        #i_icon_mini_profile{width:89px;height:34px;background:url(IMAGE URL HERE);}
        #i_icon_mini_profile:hover{background:url(IMAGE URL HERE);}

        #i_icon_mini_message{width:89px;height:34px;background:url(IMAGE URL HERE);}
        #i_icon_mini_message:hover{background:url(IMAGE URL HERE);}

        #i_icon_mini_new_message{width:89px;height:34px;background:url(IMAGE URL HERE);}
        #i_icon_mini_new_message:hover{background:url(IMAGE URL HERE);}

        #i_icon_mini_register{width:89px;height:34px;background:url(IMAGE URL HERE);}
        #i_icon_mini_register:hover{background:url(IMAGE URL HERE);}

        #i_icon_mini_login{width:92px;height:34px;background:url(IMAGE URL HERE);}
        #i_icon_mini_login:hover{background:url(IMAGE URL HERE);}

        #i_icon_mini_logout{width:92px;height:34px;background:url(IMAGE URL HERE);}
        #i_icon_mini_logout:hover{background:url(IMAGE URL HERE);}

Note: Please make sure you change the background url, ok? Though to be honest, you can just upload it in Pics Management without extensive coding.

Regards,
Pizza Boi

Pizza Boi wrote:Hi 

#1 Under pics management
#2 It would work

http://tfpb.forumtl.com/ Hi, it plays with mine perfectly. 

I removed the repeat and 0,0 option in it so try this instead:

Code:

     #i_icon_mini_index{width:92px;height:34px;background:url(IMAGE URL HERE);}
        #i_icon_mini_index:hover{background:url(IMAGE URL HERE);}

        #i_icon_mini_calendar{width:89px;height:34px;background:url(IMAGE URL HERE);}
        #i_icon_mini_calendar:hover{background:url(IMAGE URL HERE);}

        #i_icon_mini_gallery{width:89px;height:34px;background:url(IMAGE URL HERE);}
        #i_icon_mini_gallery:hover{background:url(IMAGE URL HERE);}

        #i_icon_mini_faq{width:89px;height:34px;background:url(IMAGE URL HERE);}
        #i_icon_mini_faq:hover{background:url(IMAGE URL HERE);}

        #i_icon_mini_search{width:89px;height:34px;background:url(IMAGE URL HERE);}
        #i_icon_mini_search:hover{background:url(IMAGE URL HERE);}

        #i_icon_mini_members{width:89px;height:34px;background:url(IMAGE URL HERE);}
        #i_icon_mini_members:hover{background:url(IMAGE URL HERE);}

        #i_icon_mini_groups{width:89px;height:34px;background:url(IMAGE URL HERE);}
        #i_icon_mini_groups:hover{background:url(IMAGE URL HERE);}

        #i_icon_mini_profile{width:89px;height:34px;background:url(IMAGE URL HERE);}
        #i_icon_mini_profile:hover{background:url(IMAGE URL HERE);}

        #i_icon_mini_message{width:89px;height:34px;background:url(IMAGE URL HERE);}
        #i_icon_mini_message:hover{background:url(IMAGE URL HERE);}

        #i_icon_mini_new_message{width:89px;height:34px;background:url(IMAGE URL HERE);}
        #i_icon_mini_new_message:hover{background:url(IMAGE URL HERE);}

        #i_icon_mini_register{width:89px;height:34px;background:url(IMAGE URL HERE);}
        #i_icon_mini_register:hover{background:url(IMAGE URL HERE);}

        #i_icon_mini_login{width:92px;height:34px;background:url(IMAGE URL HERE);}
        #i_icon_mini_login:hover{background:url(IMAGE URL HERE);}

        #i_icon_mini_logout{width:92px;height:34px;background:url(IMAGE URL HERE);}
        #i_icon_mini_logout:hover{background:url(IMAGE URL HERE);}

Note: Please make sure you change the background url, ok? Though to be honest, you can just upload it in Pics Management without extensive coding.

Regards,
Pizza Boi

I can upload it just fine as well. The problem I am having is with the animation sequences on mouseover.

Edit: here is a great example of what I need: http://www.ma-ar.nl/

See the teapot or the MA-AR logo? The animation plays once. I found out that the website uses a gif animation. The last frame of the animation of the gif is put to 240 seconds playtime, so that it does not repeat immediately. The only script I need is how to make the gif play to end even when you dont hover over it anymore.

Hi  

So, okay, final question before I check it out once more, you want it to always play?

Can you please post your CSS code (every code) because there might be things such as transition or animation codes affecting the navigation buttons.

Regards,
Pizza Boi

Pizza Boi wrote:Hi  

So, okay, final question before I check it out once more, you want it to always play?

Can you please post your CSS code (every code) because there might be things such as transition or animation codes affecting the navigation buttons.

Regards,
Pizza Boi

Yes, the animation should always play, but only start once you hover over the button.

Code:

    #i_icon_mini_search{width:175px;height:75px;background:url(http://i.imgur.com/GFDJ1gf.png) no-repeat 0 0;}
    #i_icon_mini_search:hover{background:url(http://i.imgur.com/9tmP0m3.gif) no-repeat  0 0;}

Hi

Can you please post ALL of your current CSS? Including stuff that are not related to your navigation bars or you can provide me an admin test account so that I can check your admin panel.

Regards,
Pizza Boi

Edited the first post.

Help needed badly