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 August 7th 2015, 11:30 pm

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 August 9th 2015, 9:06 am; edited 1 time in total

SpyroDragon
Forumember

Posts : 319
Reputation : 2
Language : English

http://SpyroDragon.com/

Back to top Go down

Solved Re: Hover Effect Help

Post by Nemo on August 8th 2015, 12:38 am

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 : 1083
Reputation : 114
Language : Greek, English, French

http://www.helpgr.forumgreek.com

Back to top Go down

Solved Re: Hover Effect Help

Post by SpyroDragon on August 8th 2015, 8:49 am

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 : 319
Reputation : 2
Language : English

http://SpyroDragon.com/

Back to top Go down

Solved Re: Hover Effect Help

Post by brandon_g on August 8th 2015, 1:48 pm

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 : 5357
Reputation : 489
Language : English
Location : USA

http://broadcastingduo.forumotion.com/

Back to top Go down

Solved Re: Hover Effect Help

Post by Ange Tuteur on August 8th 2015, 1:53 pm

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 : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Hover Effect Help

Post by SpyroDragon on August 8th 2015, 9:39 pm

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 : 319
Reputation : 2
Language : English

http://SpyroDragon.com/

Back to top Go down

Solved Re: Hover Effect Help

Post by SLGray on August 8th 2015, 9:59 pm

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 : 36705
Reputation : 2445
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Solved Re: Hover Effect Help

Post by SpyroDragon on August 8th 2015, 10:09 pm

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 : 319
Reputation : 2
Language : English

http://SpyroDragon.com/

Back to top Go down

Solved Re: Hover Effect Help

Post by SLGray on August 8th 2015, 10:15 pm

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 : 36705
Reputation : 2445
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Solved Re: Hover Effect Help

Post by SpyroDragon on August 8th 2015, 10:25 pm

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 : 319
Reputation : 2
Language : English

http://SpyroDragon.com/

Back to top Go down

Solved Re: Hover Effect Help

Post by Ange Tuteur on August 8th 2015, 10:43 pm

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 : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Hover Effect Help

Post by SpyroDragon on August 9th 2015, 12:20 am

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 : 319
Reputation : 2
Language : English

http://SpyroDragon.com/

Back to top Go down

Solved Re: Hover Effect Help

Post by Ange Tuteur on August 9th 2015, 10:16 am

You're welcome ^^

Topic archived

Have a nice day. Smile

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
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