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 Image

View previous topic View next topic Go down

Navbar Image

Post by chiefpnut on December 22nd 2010, 8:04 pm

I've been working on a new look for my forum, and am down to an extra navbar option that I've added a while ago now.

I've figured out how to have all the 'regular' buttons change looks when you hover over them, but I don't know how to do this with the extra one I added.

If anyone wants to see what I mean: Link to my forum
Hover over the buttons in the navbar, you'll see that they all change slightly when moused over, except for the Runehead one. Could anyone tell me how to make this one do thesame thing? I've got the image ready for it and all, just can't get it to work..

Any help would be greatly appreciated Smile


Last edited by chiefpnut on December 23rd 2010, 4:44 pm; edited 1 time in total

chiefpnut
New Member

Female Posts : 18
Reputation : 0
Language : dutch, english
Location : Iowa

Back to top Go down

Re: Navbar Image

Post by chiefpnut on December 23rd 2010, 4:43 pm

Being a CSS beginner, I figured I'd try copying a bit of code in the stylesheet that produced the buttons I want nicely earlier on...

Example:
#i_icon_mini_login{width:80px; height:22px; background:url(https://i68.servimg.com/u/f68/15/28/06/55/hover_23.png) no-repeat 0 0;}
#i_icon_mini_login:hover{background:url(https://i68.servimg.com/u/f68/15/28/06/55/hover_23.png) no-repeat 0 -22px;}
That bit gives the button that looks like the top part of this image: and changes to the bottom part when moused over.
So I tried adding this to the CSS right underneath the last one, since the button I made for this is thesame size etc, and I had the image uploaded like all the others:

#i_icon_mini_runehead{width:80px; height:22px; background:url(https://i68.servimg.com/u/f68/15/28/06/55/hover_14.png) no-repeat 0 0;}
#i_icon_mini_runehead:hover{background:url(https://i68.servimg.com/u/f68/15/28/06/55/hover_14.png) no-repeat 0 -22px;}

But helas, that didn't work, so I'm probably doing something terribly wrong here...

Could anyone enlighten me please? Smile

chiefpnut
New Member

Female Posts : 18
Reputation : 0
Language : dutch, english
Location : Iowa

Back to top Go down

Re: Navbar Image

Post by Colt on December 24th 2010, 1:36 am

Don't know about the way your trying to do it you may want to try using this mouse over image script generator just for that 1 nav. button if all else fails.
It's fairly easy to use.
mouse over images

Colt
Forumember

Male Posts : 94
Reputation : 20
Language : English, Redneck, & Texan
Location : TEXAS

http://thegalaxy.findtalk.biz/forum.htm

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