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.

Image exchange as hover effect on the nav bar?

View previous topic View next topic Go down

Solved Image exchange as hover effect on the nav bar?

Post by Soulmonster on May 29th 2011, 8:09 pm

Is there a way to get a roll over effect on the graphic elements in the nav bar so when the mouse cursors hovers on the images they change to other images in phpBB3? For instance a CSS script that exchanges one picture in the nav bar for another whenever you point your mouse at the image?


Last edited by Soulmonster on May 30th 2011, 8:29 pm; edited 1 time in total

Soulmonster
Forumember

Posts : 203
Reputation : 2
Language : Norwegian

Back to top Go down

Solved Re: Image exchange as hover effect on the nav bar?

Post by Guest on May 29th 2011, 8:41 pm

Yes there is a way just give me some mints to give you the code Smile

Guest
Guest


Back to top Go down

Solved Re: Image exchange as hover effect on the nav bar?

Post by Diana on May 29th 2011, 9:26 pm


Diana
Active Poster

Female Posts : 1286
Reputation : 21
Language : English

Back to top Go down

Solved Re: Image exchange as hover effect on the nav bar?

Post by Guest on May 29th 2011, 10:25 pm

I give him the full code

Guest
Guest


Back to top Go down

Solved Re: Image exchange as hover effect on the nav bar?

Post by Nera. on May 29th 2011, 10:45 pm

Hi
Remove your navigations out of Admin panel and add them all through CSS. Also go to Display >> Headers and navigations >> Display only images in nav bar: YES

Do this for the static image:
Code:
#i_icon_mini_index {
background-image: url('IMAGE LINK GOES HERE');
width: XYpx;
height: XYpx;
}

And than this for hover:
Code:
#i_icon_mini_index:hover {
background-image: url('IMAGE HOVER LINK GOES HERE');
width: XYpx;
height: XYpx;
}

Do it for all navigations, just change the end of #i_icon_mini

Like this:
_portal {
_portal:hover {

This is for the rest of navigations:
_profile
_calendar
_gallery
_message
_new_message
_register
_login
_logout
_search
_faq

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: Image exchange as hover effect on the nav bar?

Post by Soulmonster on May 30th 2011, 7:03 am

Thank you all guys! I will check out the code later today Very Happy

Soulmonster
Forumember

Posts : 203
Reputation : 2
Language : Norwegian

Back to top Go down

Solved Re: Image exchange as hover effect on the nav bar?

Post by Soulmonster on May 30th 2011, 8:28 pm

I had to change things a bit to make everything work, here is the code I used:

Code:
#i_icon_mini_index{width:75px;height:65px;background:url(http://i624.photobucket.com/albums/tt328/SoulMonster/n54okmjpg.png) no-repeat 0 0;}
#i_icon_mini_index:hover{background:url(http://i624.photobucket.com/albums/tt328/SoulMonster/n54okmjpghover.png) no-repeat 0 0;}

#i_icon_mini_calendar{width:60px;height:65px;background:url(http://i624.photobucket.com/albums/tt328/SoulMonster/28thus0jpg.png) no-repeat 0 0;}
#i_icon_mini_calendar:hover{background:url(http://i624.photobucket.com/albums/tt328/SoulMonster/28thus0jpghover.png) no-repeat  0 0;}

#i_icon_mini_gallery{width:60px;height:65px;background:url(http://i624.photobucket.com/albums/tt328/SoulMonster/24majuxjpg.png) no-repeat 0 0;}
#i_icon_mini_gallery:hover{background:url(http://i624.photobucket.com/albums/tt328/SoulMonster/24majuxjpghover.png) no-repeat  0 0;}

#i_icon_mini_faq{width:60px;height:65px;background:url(http://i624.photobucket.com/albums/tt328/SoulMonster/w8b1wpjpg.png) no-repeat 0 0;}
#i_icon_mini_faq:hover{background:url(http://i624.photobucket.com/albums/tt328/SoulMonster/w8b1wpjpghover.png) no-repeat  0 0;}

#i_icon_mini_search{width:60px;height:65px;background:url(http://i624.photobucket.com/albums/tt328/SoulMonster/90vdczjpg.png) no-repeat 0 0;}
#i_icon_mini_search:hover{background:url(http://i624.photobucket.com/albums/tt328/SoulMonster/90vdczjpghover.png) no-repeat  0 0;}

#i_icon_mini_members{width:60px;height:65px;background:url(http://i624.photobucket.com/albums/tt328/SoulMonster/23lcnwjjpg.png) no-repeat 0 0;}
#i_icon_mini_members:hover{background:url(http://i624.photobucket.com/albums/tt328/SoulMonster/23lcnwjjpghover.png) no-repeat  0 0;}

#i_icon_mini_groups{width:60px;height:65px;background:url(http://i624.photobucket.com/albums/tt328/SoulMonster/2i5ezqjpg.png) no-repeat 0 0;}
#i_icon_mini_groups:hover{background:url(http://i624.photobucket.com/albums/tt328/SoulMonster/2i5ezqjpghover.png) no-repeat  0 0px;}

#i_icon_mini_profile{width:60px;height:65px;background:url(http://i624.photobucket.com/albums/tt328/SoulMonster/2z6avsljpg.png) no-repeat 0 0;}
#i_icon_mini_profile:hover{background:url(http://i624.photobucket.com/albums/tt328/SoulMonster/2z6avsljpgprofile.png) no-repeat  0 0;}

#i_icon_mini_message{width:60px;height:65px;background:url(http://i624.photobucket.com/albums/tt328/SoulMonster/xf9oa0jpg.png) no-repeat 0 0;}
#i_icon_mini_message:hover{background:url(http://i624.photobucket.com/albums/tt328/SoulMonster/xf9oa0jpghover.png) no-repeat 0 0;}

#i_icon_mini_new_message{width:60px;height:65px;background:url(http://i624.photobucket.com/albums/tt328/SoulMonster/sqtwcxjpg.png) no-repeat 0 0;}
#i_icon_mini_new_message:hover{background:url(http://i624.photobucket.com/albums/tt328/SoulMonster/sqtwcxjpghover.png) no-repeat  0 0;}

#i_icon_mini_logout{width:60px;height:65px;background:url(http://i624.photobucket.com/albums/tt328/SoulMonster/1zdomshjpg.png) no-repeat 0 0;}
#i_icon_mini_logout:hover{background:url(http://i624.photobucket.com/albums/tt328/SoulMonster/1zdomshjpghover.png) no-repeat  0 0;}

#i_icon_mini_register{width:60px;height:65px;background:url(http://i624.photobucket.com/albums/tt328/SoulMonster/2h2r585jpg.png) no-repeat 0 0;}
#i_icon_mini_register:hover{background:url(http://i624.photobucket.com/albums/tt328/SoulMonster/2h2r585jpghover.png) no-repeat  0 0;}

#i_icon_mini_login{width:60px;height:65px;background:url(http://i624.photobucket.com/albums/tt328/SoulMonster/2ltlytijpg.png) no-repeat 0 0;}
#i_icon_mini_login:hover{background:url(http://i624.photobucket.com/albums/tt328/SoulMonster/2ltlytijpghover.png) no-repeat  0 0;}

Everything works perfectly now! Very Happy

Soulmonster
Forumember

Posts : 203
Reputation : 2
Language : Norwegian

Back to top Go down

Solved Re: Image exchange as hover effect on the nav bar?

Post by Nera. on May 30th 2011, 8:35 pm

Solved => Locked

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

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