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.

Hover Effect Help

View previous topic View next topic Go down

Solved Hover Effect Help

Post by SpyroDragon on Fri 7 Aug - 16:30

Whats the Codes to make it to where hover over the Navi bar and it changes as you hover it?

Can you give me The codes like this

" <a href="YOURWEBSITEHERE"><img src="YOURIMGURLHERE"></a> "


Last edited by SpyroDragon on Sun 9 Aug - 2:06; edited 1 time in total

SpyroDragon
Forumember

Posts : 328
Reputation : 2
Language : English

http://SpyroDragon.com/

Back to top Go down

Solved Re: Hover Effect Help

Post by Nemo on Fri 7 Aug - 17:38

Hello,

Could you check this post: http://help.forumotion.com/t132284-hover-effect-in-nav-bar#888454 ?
You can change the colors and the codes in order to meet your needs.

Hello

Nemo
Support Moderator
Support Moderator

Male Posts : 1149
Reputation : 116
Language : Greek, English, French

http://www.helpgr.forumgreek.com

Back to top Go down

Solved Re: Hover Effect Help

Post by SpyroDragon on Sat 8 Aug - 1:49

I want To Change To
When you Hover it.. Maybe it explained it in the link you gave me, but I could not find where to put the IMGs in.. :S

SpyroDragon
Forumember

Posts : 328
Reputation : 2
Language : English

http://SpyroDragon.com/

Back to top Go down

Solved Re: Hover Effect Help

Post by brandon_g on Sat 8 Aug - 6:48

Hello,

Your name navigation bar is a picture based one then?


-Brandon


Remember to mark your topic when a solution is found.

brandon_g
Support Moderator
Support Moderator

Male Posts : 5475
Reputation : 500
Language : English
Location : USA

http://broadcastingduo.forumotion.com/

Back to top Go down

Solved Re: Hover Effect Help

Post by Ange Tuteur on Sat 8 Aug - 6:53

You want to change the navigation link image when you hover over it, correct ? This would be the CSS you need to utilize :
Code:
/* Index / Home */
#i_icon_mini_index{width:80px; height:25px; background:url(/img.gif) no-repeat 0 0;}
#i_icon_mini_index:hover{background:url(/img.gif) no-repeat 0 0;}

/* Portal */
#i_icon_mini_portal{width:80px; height:25px; background:url(/img.gif) no-repeat 0 0;}
#i_icon_mini_portal:hover{background:url(/img.gif) no-repeat 0 0;}

/* FAQ */
#i_icon_mini_faq{width:80px; height:25px; background:url(/img.gif) no-repeat 0 0;}
#i_icon_mini_faq:hover{background:url(/img.gif) no-repeat  0 0;}

/* Search */
#i_icon_mini_search{width:80px; height:25px; background:url(/img.gif) no-repeat 0 0;}
#i_icon_mini_search:hover{background:url(/img.gif) no-repeat  0 0;}

/* Members */
#i_icon_mini_members{width:80px; height:25px; background:url(/img.gif) no-repeat 0 0;}
#i_icon_mini_members:hover{background:url(/img.gif) no-repeat  0 0;}

/* Groups */
#i_icon_mini_groups{width:80px; height:25px; background:url(/img.gif) no-repeat 0 0;}
#i_icon_mini_groups:hover{background:url(/img.gif) no-repeat  0 0px;}

/* Profile */
#i_icon_mini_profile{width:80px; height:25px; background:url(/img.gif) no-repeat 0 0;}
#i_icon_mini_profile:hover{background:url(/img.gif) no-repeat  0 0;}

/* PM message */
#i_icon_mini_message{width:80px; height:25px; background:url(/img.gif) no-repeat 0 0;}
#i_icon_mini_message:hover{background:url(/img.gif) no-repeat 0 0;}

/* PM new message */
#i_icon_mini_new_message{width:80px; height:25px; background:url(/img.gif) no-repeat 0 0;}
#i_icon_mini_new_message:hover{background:url(/img.gif) no-repeat  0 0;}

/* Logout */
#i_icon_mini_logout{width:80px; height:25px; background:url(/img.gif) no-repeat 0 0;}
#i_icon_mini_logout:hover{background:url(/img.gif) no-repeat  0 0;}

/* Register */
#i_icon_mini_register{width:80px; height:25px; background:url(/img.gif) no-repeat 0 0;}
#i_icon_mini_register:hover{background:url(/img.gif) no-repeat  0 0;}

/* Login */
#i_icon_mini_login{width:80px; height:25px; background:url(/img.gif) no-repeat 0 0;}
#i_icon_mini_login:hover{background:url(/img.gif) no-repeat  0 0;}

Replace /img.gif by the URL of your image, and change the height / width to match that of the dimensions of your image. Also, make sure that the images for the navbar in pics management are hidden.

Ange Tuteur
Forumaster

Male Posts : 13039
Reputation : 2719
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Hover Effect Help

Post by SpyroDragon on Sat 8 Aug - 14:39

What if one of the buttons is a Customized Nav Bar Menu from
The Headers and Navigation Section of the admin panel ?

Im thinking that's why the 1st one wont work for me, because my home button is a customized
Nav Bar thingy.

SpyroDragon
Forumember

Posts : 328
Reputation : 2
Language : English

http://SpyroDragon.com/

Back to top Go down

Solved Re: Hover Effect Help

Post by SLGray on Sat 8 Aug - 14:59

Are you adding the image URL's in the CSS code Ange Tuteur gave you?


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 37717
Reputation : 2533
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Solved Re: Hover Effect Help

Post by SpyroDragon on Sat 8 Aug - 15:09

yes , I tried adding the home css he/she gave me, but it wouldent work, im assuming its because its a customized menu thingy --

SpyroDragon
Forumember

Posts : 328
Reputation : 2
Language : English

http://SpyroDragon.com/

Back to top Go down

Solved Re: Hover Effect Help

Post by SLGray on Sat 8 Aug - 15:15

So you removed the default navigation menu and added a customized one?


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 37717
Reputation : 2533
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Solved Re: Hover Effect Help

Post by SpyroDragon on Sat 8 Aug - 15:25

Yes... The Default one , lead to the forums, I wanted it to lead to HTML Page, so yes the default index page button was removed and replaced with a custom one so it would lead to a HTML page instead of the forums.

SpyroDragon
Forumember

Posts : 328
Reputation : 2
Language : English

http://SpyroDragon.com/

Back to top Go down

Solved Re: Hover Effect Help

Post by Ange Tuteur on Sat 8 Aug - 15:43

In that case it would be like this :
Code:
a.mainmenu[href="http://SpyroDragon.com/"] img { width:80px; height:25px; background:url(/img.gif) no-repeat 0 0; }
a.mainmenu[href="http://SpyroDragon.com/"] img:hover { background:url(/img.gif) no-repeat 0 0; }

You'll have to use the CSS attribute selector ( the brackets [] ) and go by the URL of the custom menu to select the image so you can apply the background image. ( You'll of course need to remove the custom image in the AP )

Ange Tuteur
Forumaster

Male Posts : 13039
Reputation : 2719
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Hover Effect Help

Post by SpyroDragon on Sat 8 Aug - 17:20

It would not change at hover, so I deleted the custom link, from the AP , and then the WHole button just disapeers, even when the code is in my CSS Sheet. and I changed the size to normal, size, but its not changing on hover...

Then I tried changing the hover picture to something completely random with a wallpaper, and when I hover over the hoem button, it goes behind the Home button and not over it.. and The Home button is removed in Display pictures with the empty Gif.. so I don't kno, ill leave it there so you guys can look at it.



AH NVM< I found the soultuion, You had to Remove the Picture Link of the Customized menu thing, My bad..


But now I need the other buttons..



I have more customizedMenu LInks.. Such as

" Music "

Never Mind, I Figured it out.
[ SOLVED ]
THanks again Angie.

SpyroDragon
Forumember

Posts : 328
Reputation : 2
Language : English

http://SpyroDragon.com/

Back to top Go down

Solved Re: Hover Effect Help

Post by Ange Tuteur on Sun 9 Aug - 3:16

You're welcome ^^

Topic archived

Have a nice day. Smile

Ange Tuteur
Forumaster

Male Posts : 13039
Reputation : 2719
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.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