Image exchange as hover effect on the nav bar?
3 posters
Page 1 of 1
Image exchange as hover effect on the nav bar?
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, 9:29 pm; edited 1 time in total
Soulmonster- Forumember
- Posts : 228
Reputation : 2
Language : Norwegian
Re: Image exchange as hover effect on the nav bar?
Yes there is a way just give me some mints to give you the code
Guest- Guest
Diana- Active Poster
- Posts : 1286
Reputation : 21
Language : English
Re: Image exchange as hover effect on the nav bar?
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:
And than this for hover:
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
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
- Posts : 7078
Reputation : 2017
Language : English
Location : -
Re: Image exchange as hover effect on the nav bar?
Thank you all guys! I will check out the code later today
Soulmonster- Forumember
- Posts : 228
Reputation : 2
Language : Norwegian
Re: Image exchange as hover effect on the nav bar?
I had to change things a bit to make everything work, here is the code I used:
Everything works perfectly now!
- 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!
Soulmonster- Forumember
- Posts : 228
Reputation : 2
Language : Norwegian
Re: Image exchange as hover effect on the nav bar?
Solved => Locked
Nera.- Energetic
- Posts : 7078
Reputation : 2017
Language : English
Location : -
Similar topics
» image hover effect on rows
» Possible to get the same hover effect?
» Hover Navigation Bar Effect
» Hover glow effect
» Hover on Category effect
» Possible to get the same hover effect?
» Hover Navigation Bar Effect
» Hover glow effect
» Hover on Category effect
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum