The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Image exchange as hover effect on the nav bar?

3 posters

Go down

Solved Image exchange as hover effect on the nav bar?

Post by Soulmonster May 29th 2011, 9: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, 9:29 pm; edited 1 time in total
avatar
Soulmonster
Forumember

Posts : 228
Reputation : 2
Language : Norwegian

Back to top Go down

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

Post by Guest May 29th 2011, 9:41 pm

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


Back to top Go down

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

Post by Diana May 29th 2011, 10:26 pm

Diana
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 May 29th 2011, 11:25 pm

I give him the full code
avatar
Guest
Guest


Back to top Go down

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

Post by Nera. May 29th 2011, 11: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.
Nera.
Energetic

Female Posts : 7078
Reputation : 2017
Language : English
Location : -

Back to top Go down

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

Post by Soulmonster May 30th 2011, 8:03 am

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

Posts : 228
Reputation : 2
Language : Norwegian

Back to top Go down

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

Post by Soulmonster May 30th 2011, 9: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
avatar
Soulmonster
Forumember

Posts : 228
Reputation : 2
Language : Norwegian

Back to top Go down

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

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

Solved => Locked
Nera.
Nera.
Energetic

Female Posts : 7078
Reputation : 2017
Language : English
Location : -

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum