Thread: CSS active page

    #1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2013
    Posts
    1
    Rep Power
    0

    CSS active page


    Can someone help me out I want the background image to be the same as the rollover image when you are on the active page. Heres my code

    #header ul li.item-101 a {width:92px; height:56px; background:url(../images/buttonBlack.png) no-repeat;}
    #header ul li.item-101 a:hover,
    #header li.active,
    #header li.active a:visited{background:url(../images/buttons_03.png) no-repeat;}

    /* button2 */
    #header ul li.item-102 a {width:92px; height:56px; background:url(../images/buttonBlack.png) no-repeat;}

    #header ul li.item-102 a.active {background:url(../images/buttons_03.png) no-repeat;}
    #header ul li.item-102 a:hover {background:url(../images/buttons_03.png) no-repeat;}
    /* button3 */
    #header ul li.item-103 a {width:140px; height:56px; background:url(../images/blackbuttonlong.png) no-repeat;}
    #header ul li.item-103 a:hover,
    #header ul li.item-103 a.active {background:url(../images/blueButtonLong.png) no-repeat;}
    /* button4 */
    #header ul li.item-104 a {width:92px; height:56px; background:url(../images/buttonBlack.png) no-repeat;}
    #header ul li.item-104 a:hover,
    #header ul li.item-104 a.active {background:url(../images/buttons_03.png) no-repeat;}
    /* button5 */
    #header ul li.item-105 a {width:92px; height:56px; background:url(../images/buttonBlack.png) no-repeat;}
    #header ul li.item-105 a:hover,
    #header ul li.item-105 a.active {background:url(../images/buttons_03.png) no-repeat;}
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    299
    Rep Power
    9
    Good evening,

    I did something similar but used jQuery to retrieve the file name, then depending on what that returns, setting the background image of an anchor tag.

    Are you familiar with JS or jQuery at all?

    Kind regards,

    NM.

IMN logo majestic logo threadwatch logo seochat tools logo