Image exchange as hover effect on the nav bar?

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

avatar
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
avatar
Nera.
Energetic

Female Posts : 7078
Reputation : 2015
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://illiweb.com/fa/pbucket.gif) no-repeat 0 0;}
#i_icon_mini_index:hover{background:url(http://illiweb.com/fa/pbucket.gif) no-repeat 0 0;}

#i_icon_mini_calendar{width:60px;height:65px;background:url(http://illiweb.com/fa/pbucket.gif) no-repeat 0 0;}
#i_icon_mini_calendar:hover{background:url(http://illiweb.com/fa/pbucket.gif) no-repeat  0 0;}

#i_icon_mini_gallery{width:60px;height:65px;background:url(http://illiweb.com/fa/pbucket.gif) no-repeat 0 0;}
#i_icon_mini_gallery:hover{background:url(http://illiweb.com/fa/pbucket.gif) no-repeat  0 0;}

#i_icon_mini_faq{width:60px;height:65px;background:url(http://illiweb.com/fa/pbucket.gif) no-repeat 0 0;}
#i_icon_mini_faq:hover{background:url(http://illiweb.com/fa/pbucket.gif) no-repeat  0 0;}

#i_icon_mini_search{width:60px;height:65px;background:url(http://illiweb.com/fa/pbucket.gif) no-repeat 0 0;}
#i_icon_mini_search:hover{background:url(http://illiweb.com/fa/pbucket.gif) no-repeat  0 0;}

#i_icon_mini_members{width:60px;height:65px;background:url(http://illiweb.com/fa/pbucket.gif) no-repeat 0 0;}
#i_icon_mini_members:hover{background:url(http://illiweb.com/fa/pbucket.gif) no-repeat  0 0;}

#i_icon_mini_groups{width:60px;height:65px;background:url(http://illiweb.com/fa/pbucket.gif) no-repeat 0 0;}
#i_icon_mini_groups:hover{background:url(http://illiweb.com/fa/pbucket.gif) no-repeat  0 0px;}

#i_icon_mini_profile{width:60px;height:65px;background:url(http://illiweb.com/fa/pbucket.gif) no-repeat 0 0;}
#i_icon_mini_profile:hover{background:url(http://illiweb.com/fa/pbucket.gif) no-repeat  0 0;}

#i_icon_mini_message{width:60px;height:65px;background:url(http://illiweb.com/fa/pbucket.gif) no-repeat 0 0;}
#i_icon_mini_message:hover{background:url(http://illiweb.com/fa/pbucket.gif) no-repeat 0 0;}

#i_icon_mini_new_message{width:60px;height:65px;background:url(http://illiweb.com/fa/pbucket.gif) no-repeat 0 0;}
#i_icon_mini_new_message:hover{background:url(http://illiweb.com/fa/pbucket.gif) no-repeat  0 0;}

#i_icon_mini_logout{width:60px;height:65px;background:url(http://illiweb.com/fa/pbucket.gif) no-repeat 0 0;}
#i_icon_mini_logout:hover{background:url(http://illiweb.com/fa/pbucket.gif) no-repeat  0 0;}

#i_icon_mini_register{width:60px;height:65px;background:url(http://illiweb.com/fa/pbucket.gif) no-repeat 0 0;}
#i_icon_mini_register:hover{background:url(http://illiweb.com/fa/pbucket.gif) no-repeat  0 0;}

#i_icon_mini_login{width:60px;height:65px;background:url(http://illiweb.com/fa/pbucket.gif) no-repeat 0 0;}
#i_icon_mini_login:hover{background:url(http://illiweb.com/fa/pbucket.gif) 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
avatar
Nera.
Energetic

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

http://webartzforum.com

Back to top Go down

Back to top


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