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.

navbar images change

View previous topic View next topic Go down

navbar images change

Post by Karim Patron on July 12th 2013, 2:15 pm

Hi forumotion

i want to make something
when you put the cursor on a navigation bar, the image change

please give me code
i prepared all the images and ready to make it

can someone help me, i want a code

Karim Patron
Forumember

Posts : 55
Reputation : 4
Language : English, French, Arabic

Back to top Go down

Re: navbar images change

Post by masqelinus. on July 12th 2013, 2:53 pm

try use this code, you have to paste it in CSS:
Code:
#i_icon_mini_index{width:40px;height:31px;background:url( your img link ) no-repeat 0 0;}
#i_icon_mini_index:hover{background:url(your hover img link ) no-repeat 0 0;}

#i_icon_mini_faq{width:46px;height:31px;background:url( your img link ) no-repeat 0 0;}
#i_icon_mini_faq:hover{background:url(your hover img link ) no-repeat 0 0;}

#i_icon_mini_search{width:24px;height:31px;background:url( your img link ) no-repeat 0 0;}
#i_icon_mini_search:hover{background:url(your hover img link ) no-repeat 0 0;}

#i_icon_mini_members{width:33px;height:31px;background:url( your img link ) no-repeat 0 0;}
#i_icon_mini_members:hover{background:url(your hover img link ) no-repeat 0 0;}

#i_icon_mini_groups{width:45px;height:31px;background:url( your img link ) no-repeat 0 0;}
#i_icon_mini_groups:hover{background:url(your hover img link ) no-repeat 0 0px;}

#i_icon_mini_profile{width:13px;height:31px;background:url( your img link ) no-repeat 0 0;}
#i_icon_mini_profile:hover{background:url(your hover img link ) no-repeat 0 0;}

#i_icon_mini_message{width:62px;height:31px;background:url( your img link ) no-repeat 0 0;}
#i_icon_mini_message:hover{background:url(your hover img link ) no-repeat 0 0;}

#i_icon_mini_new_message{width:27px;height:31px;background:url( your img link ) no-repeat 0 0;}
#i_icon_mini_new_message:hover{background:url(your hover img link ) no-repeat 0 0;}

#i_icon_mini_logout{width:112px;height:31px;background:url( your img link ) no-repeat 0 0;}
#i_icon_mini_logout:hover{background:url(your hover img link ) no-repeat 0 0;}

#i_icon_mini_register{width:64px;height:31px;background:url( your img link ) no-repeat 0 0;}
#i_icon_mini_register:hover{background:url(your hover img link ) no-repeat 0 0;}

#i_icon_mini_login{width:122px;height:31px;background:url( your img link ) no-repeat 0 0;}
#i_icon_mini_login:hover{background:url(your hover img link ) no-repeat 0 0;}

at the first lines put the links of your images you want for your navigation and at the second lines put the links of images that you want when the cursor is on a navigation bar.

also change the width and height at the first lines in size that you have for your navigation buttons. it should work Smile

masqelinus.
New Member

Female Posts : 14
Reputation : 2
Language : English
Location : Slovenia

Back to top Go down

Re: navbar images change

Post by Karim Patron on July 12th 2013, 3:03 pm

i added more navigation bars to the default ones (rules - statistics ...)

how can i do it with those new navigation bars

Karim Patron
Forumember

Posts : 55
Reputation : 4
Language : English, French, Arabic

Back to top Go down

Re: navbar images change

Post by kirk on July 12th 2013, 4:45 pm

@Karim Patron wrote:i added more navigation bars to the default ones (rules - statistics ...)

how can i do it with those new navigation bars

Do you have all your images?
you really dint explain much, you dint say if you wanted it to have other images that show in a hover. or just a plain hover when images fade or highlight.

the css code masqelinus provided above you first need the images you want for your navigation bar. then whatever dimensions they are you have to adjust where you see the dimensions settings in the code. you would do that for each one/line.Then you upload the images and use a direct image link.

For the hover images the same thing. You will need the images that are going to be used for the hover images as well.these will be the ones that show when you hover/mouse-over the navigation bar.

Be sure you mouse-over images are the same size as your main images. Then upload them and use a direct image link the same way.

After that, add to your css hit save and done Smile

Oh and if you need more then just copy one of the lines masqelinus has and add it under the last one in the list.
it will be the same set up. Or if it is to many then you can remove whats needed.

kirk
Forumaster

Male Posts : 11037
Reputation : 651
Language : English,Vulcan,Klingon, Romulan,& Gorn

Back to top Go down

Re: navbar images change

Post by Karim Patron on July 12th 2013, 5:15 pm

hi kirk

i have all images i need
i just need code

here is what i want to know
example : The index image id is #i_icon_mini_index
so how to know the id for navigation images added by me ?


Code:
#i_icon_mini_index{width:40px;height:31px;background:url( your img link ) no-repeat 0 0;}
#i_icon_mini_index:hover{background:url(your hover img link ) no-repeat 0 0;}

so i want remplace #i_icon_mini_index with the id of the images added by me

Karim Patron
Forumember

Posts : 55
Reputation : 4
Language : English, French, Arabic

Back to top Go down

Re: navbar images change

Post by Karim Patron on July 12th 2013, 9:14 pm

BUMP !!!

Karim Patron
Forumember

Posts : 55
Reputation : 4
Language : English, French, Arabic

Back to top Go down

Re: navbar images change

Post by Karim Patron on July 12th 2013, 11:24 pm

You see, the code given is only for default navigation bar

but i added some navigations that i want to apply that thing on them too

how can i do that ... ?

Karim Patron
Forumember

Posts : 55
Reputation : 4
Language : English, French, Arabic

Back to top Go down

Re: navbar images change

Post by kirk on July 13th 2013, 1:11 am

@Karim Patron wrote:You see, the code given is only for default navigation bar

but i added some navigations that i want to apply that thing on them too

how can i do that ... ?

Not sure i will have to test it.
If you need to add more to your navigation bar. then first go to your forms navigation settings and create the new navigation you want.


Other then that i will have to test whats above,
Not sure why she did not mention anything about id or if it is needed, i would think some kind of id would be needed now that you mentioned it.



Or You can check out these two links Nera provided in another thread as well if you like.
1. http://help.forumotion.com/t91142-hover-nav-barsrep-asap?highlight=Hover
2. http://help.forumotion.com/t91018-image-exchange-as-hover-effect-on-the-nav-bar?highlight=Hover

kirk
Forumaster

Male Posts : 11037
Reputation : 651
Language : English,Vulcan,Klingon, Romulan,& Gorn

Back to top Go down

Re: navbar images change

Post by Karim Patron on July 13th 2013, 1:31 am

Kirk

i will be very thankful if you test it for me and give me what i need

thanks in advance

Karim Patron
Forumember

Posts : 55
Reputation : 4
Language : English, French, Arabic

Back to top Go down

Re: navbar images change

Post by kirk on July 13th 2013, 1:40 am

@Karim Patron wrote:Kirk

i will be very thankful if you test it for me and give me what i need

thanks in advance

i will try when i get a lil time over the weekend. i have to see what test board i have with simple navigation tabs already set up first.

or like said check out the links Nera provided above.

I use a completely different method with html then css for my mouse-over stuff. unless it was just a simple highlight then i use a basic css for that with no mouse-over images required.

Not saying you would want this but is simple, this is a fade
Code:

a.mainmenu:hover img {
opacity : .4;
-khtml-opacity : 0.2;
-moz-opacity : 0.2;
filter : alpha(opacity=20);
opacity : 0.2;
}


kirk
Forumaster

Male Posts : 11037
Reputation : 651
Language : English,Vulcan,Klingon, Romulan,& Gorn

Back to top Go down

Re: navbar images change

Post by Karim Patron on July 13th 2013, 1:51 am

Kirk

dont do anything, i will use that but with a little change

all i have to do is change opacity

thank you very much



THIS TOPIC IS NOW : Solved

Karim Patron
Forumember

Posts : 55
Reputation : 4
Language : English, French, Arabic

Back to top Go down

Re: navbar images change

Post by kirk on July 13th 2013, 2:10 am

@Karim Patron wrote:Kirk

dont do anything, i will use that but with a little change

all i have to do is change opacity

thank you very much



THIS TOPIC IS NOW : Solved

LOL well that's cool yeah you can adjust it how you like.
over the weekend i will try the code above and see whats what with it Smile

Topic now moved to archives

kirk
Forumaster

Male Posts : 11037
Reputation : 651
Language : English,Vulcan,Klingon, Romulan,& Gorn

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