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
avatar
SpyroDragon
Forumember

Posts : 330
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
avatar
Nemo
Support Moderator
Support Moderator

Male Posts : 1168
Reputation : 118
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
avatar
SpyroDragon
Forumember

Posts : 330
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.
avatar
brandon_g
Support Moderator
Support Moderator

Male Posts : 5723
Reputation : 524
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.
avatar
Ange Tuteur
Forumaster

Male Posts : 13149
Reputation : 2838
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.
avatar
SpyroDragon
Forumember

Posts : 330
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.

avatar
SLGray
Administrator
Administrator

Male Posts : 38733
Reputation : 2601
Language : English
Location : United States

http://classifiedads.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 --
avatar
SpyroDragon
Forumember

Posts : 330
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.

avatar
SLGray
Administrator
Administrator

Male Posts : 38733
Reputation : 2601
Language : English
Location : United States

http://classifiedads.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.
avatar
SpyroDragon
Forumember

Posts : 330
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 )
avatar
Ange Tuteur
Forumaster

Male Posts : 13149
Reputation : 2838
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.
avatar
SpyroDragon
Forumember

Posts : 330
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
avatar
Ange Tuteur
Forumaster

Male Posts : 13149
Reputation : 2838
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