Hover - Image exchange as hover effect on the nav bar? Hitskin_logo Hitskin.com

This is a Hitskin.com skin preview
Install the skinReturn to the skin page

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.
3 posters

    Image exchange as hover effect on the nav bar?

    avatar
    Soulmonster
    Forumember


    Posts : 228
    Reputation : 2
    Language : Norwegian

    Solved Image exchange as hover effect on the nav bar?

    Post by Soulmonster 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
    avatar
    Guest
    Guest


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

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

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


    Female Posts : 1286
    Reputation : 21
    Language : English

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

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

    avatar
    Guest
    Guest


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

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

    I give him the full code
    Nera.
    Nera.
    Energetic


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

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

    Post by Nera. 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
    Soulmonster
    Forumember


    Posts : 228
    Reputation : 2
    Language : Norwegian

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

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

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

    Post by Soulmonster 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
    Nera.
    Nera.
    Energetic


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

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

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

    Solved => Locked