The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Navigation buttons - gif hover animation?

View previous topic View next topic Go down

Navigation buttons - gif hover animation?

Post by Klemen on March 22nd 2014, 10:31 pm

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:



Last edited by Klemen on March 23rd 2014, 5:57 pm; edited 2 times in total

Klemen
Forumember

Male Posts : 292
Reputation : 32
Language : English, German, Slovene

http://www.bannedbrotherhood.com

Back to top Go down

Re: Navigation buttons - gif hover animation?

Post by vaccam on March 23rd 2014, 1:02 am

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

vaccam
Forumember

Posts : 371
Reputation : 14
Language : Norwegian
Location : Norway

http://www.revengelesspk.com/

Back to top Go down

Re: Navigation buttons - gif hover animation?

Post by Pizza Boi on March 23rd 2014, 7:28 am

Hi Very Happy

It's your GIF image that's the problem Smile. 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 Smile.

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
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Re: Navigation buttons - gif hover animation?

Post by Klemen on March 23rd 2014, 11:54 am

@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?http://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
Forumember

Male Posts : 292
Reputation : 32
Language : English, German, Slovene

http://www.bannedbrotherhood.com

Back to top Go down

Re: Navigation buttons - gif hover animation?

Post by Klemen on March 23rd 2014, 2:52 pm

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
Forumember

Male Posts : 292
Reputation : 32
Language : English, German, Slovene

http://www.bannedbrotherhood.com

Back to top Go down

Re: Navigation buttons - gif hover animation?

Post by Pizza Boi on March 23rd 2014, 3:48 pm

@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?http://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 Very Happy

#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
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Re: Navigation buttons - gif hover animation?

Post by Klemen on March 23rd 2014, 3:55 pm

@Pizza Boi wrote:HiVery Happy

#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.


Last edited by Klemen on March 23rd 2014, 4:17 pm; edited 1 time in total

Klemen
Forumember

Male Posts : 292
Reputation : 32
Language : English, German, Slovene

http://www.bannedbrotherhood.com

Back to top Go down

Re: Navigation buttons - gif hover animation?

Post by Pizza Boi on March 23rd 2014, 4:08 pm

Hi Very Happy

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
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Re: Navigation buttons - gif hover animation?

Post by Klemen on March 23rd 2014, 4:13 pm

@Pizza Boi wrote:Hi Very Happy

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;}

Klemen
Forumember

Male Posts : 292
Reputation : 32
Language : English, German, Slovene

http://www.bannedbrotherhood.com

Back to top Go down

Re: Navigation buttons - gif hover animation?

Post by Pizza Boi on March 23rd 2014, 4:20 pm

Hi Very Happy

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

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Re: Navigation buttons - gif hover animation?

Post by Klemen on March 23rd 2014, 5:42 pm

Edited the first post.

Help needed badly:/

Klemen
Forumember

Male Posts : 292
Reputation : 32
Language : English, German, Slovene

http://www.bannedbrotherhood.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum